การแปลงสัญญาณเป็นสัญญาณที่สังเกตได้ในเชิงมุม: สิ่งที่คุณต้องรู้

Angular v16 ขอแนะนำแพ็คเกจใหม่rxjs-interopซึ่งมาพร้อมกับฟังก์ชั่นที่มีประโยชน์toObservableซึ่งช่วยให้นักพัฒนาสามารถแปลงไฟล์ a signalเป็นไฟล์observable. ในบทความนี้ เราจะสำรวจคุณลักษณะใหม่นี้และวิธีการใช้งาน

ขั้นแรก เราต้องนำเข้าtoObservableฟังก์ชันจาก@angular/core/rxjs-interopโมดูล นี่คือตัวอย่างข้อมูลโค้ดที่สาธิตการใช้งาน:

import { toObservable } from '@angular/core/rxjs-interop';
import { signal } from '@angular/core';

@Component({
  standalone: true,
  template: `
    <input (input)="value.set(input.value)" #input />
  `,
})
export class FooComponent {
  value = signal('');
  value$ = toObservable(this.value);

  ngOnInit() {
    this.value$.subscribe(console.log);
  }
}

ภายใต้ประทุนtoObservableฟังก์ชันจะสร้าง a ReplaySubjectและรวมสิ่งที่ให้มาsignalใน effectเมื่อsignalค่าเปลี่ยนแปลงeffectจะส่งค่าใหม่ออกมา

ข้อดีอย่างหนึ่งของการใช้สัญญาณคือเราไม่จำเป็นต้องเพิ่มdistinctUntilChangedตัวดำเนินการ เนื่องจากงานได้เสร็จสิ้นในsignalระดับ แล้ว นอกจากนี้ หากsignalเกิดข้อผิดพลาด ระบบจะส่งการแจ้งเตือนข้อผิดพลาดไปยังสมาชิก

เอฟเฟกต์หนึ่งที่น่าสนใจของการใช้เอฟเฟก ต์() เพื่อปล่อยค่าคือค่าจะถูกส่งแบบอะซิงโครนัส ซึ่งหมายความว่าแม้ว่าเราจะปล่อยค่าหลายค่าที่ "ขีด" เดียวกัน เราก็จะได้รับค่าสัญญาณสุดท้าย เท่านั้น

โปรดทราบว่าเมื่อมีtoObservableการเรียกใช้ฟังก์ชัน ฟังก์ชันจะตรวจสอบเพื่อให้แน่ใจว่าฟังก์ชันนั้นถูกเรียกใน บริบท การฉีด ถ้าไม่เช่นนั้นจะเกิดข้อผิดพลาดขึ้น ซึ่งหมายความว่าเราจะใช้toObservableฟังก์ชันได้ก็ต่อเมื่อinject()มีฟังก์ชันนั้นเท่านั้น ยกเว้นกรณีที่เราผ่านการinjectorระบุอย่างชัดแจ้ง

@Component({
  standalone: true,
  template: `
    <input (input)="value.set(input.value)" #input />
  `,
})
export class FooComponent {
  value = signal('');
  private injector = inject(Injector);
 
  ngOnInit() {
    const value$ = toObservable(this.value, {
      injector: this.injector
    }).subscribe(console.log);
  }
}

ติดตามฉันบนMediumหรือTwitterเพื่ออ่านเพิ่มเติมเกี่ยวกับ Angular และ JS!