Sinyalleri Açısal Olarak Gözlemlenebilirlere Dönüştürme: Bilmeniz Gerekenler

May 01 2023
Angular v16, geliştiricilerin bir sinyali gözlemlenebilir bir sinyale dönüştürmesine olanak tanıyan toObservable adlı kullanışlı bir işlevle birlikte gelen yeni rxjs-interop paketini sunar. Bu yazıda, bu yeni özelliği ve nasıl kullanılabileceğini keşfedeceğiz.

Angular v16, geliştiricilerin a'yı an'a dönüştürmesine olanak tanıyan rxjs-interopkullanışlı bir işlevle gelen yeni paketi sunar . Bu yazıda, bu yeni özelliği ve nasıl kullanılabileceğini keşfedeceğiz.toObservablesignalobservable

toObservableİlk olarak, işlevi modülden içe aktarmamız gerekiyor @angular/core/rxjs-interop. İşte kullanımını gösteren örnek bir kod parçacığı:

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);
  }
}

Kaputun altında, toObservableişlev bir oluşturur ReplaySubjectve sağlananı signalbir effect. Değer değiştiğinde signal, effectyeni değeri yayar.

distinctUntilChangedSinyalleri kullanmanın bir yararı , seviyede iş zaten yapıldığından operatörü eklememize gerek olmamasıdır signal. Ayrıca signalhata atarsa ​​hata bildirimi olarak aboneye iletilir.

Değerleri yaymak için efekti () kullanmanın ilginç bir etkisi, değerin eşzamansız olarak iletilmesidir . Bu, aynı "tikte" birden çok değer göndersek bile, yalnızca son sinyal değerini alacağımız anlamına gelir .

toObservableİşlev çağrıldığında, bir enjeksiyon bağlamında çağrıldığından emin olmak için kontrol edildiğini not etmek önemlidir . Değilse, bir hata atılacaktır. Bu, açıkça ilettiğimiz durumlar dışında, işlevi yalnızca işlev kullanılabilir olduğunda kullanabileceğimiz anlamına gelir .toObservableinject()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);
  }
}

Angular ve JS hakkında daha fazlasını okumak için Medium veya Twitter'da beni takip edin !