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

Angular v16, gözlemlenebiliri sinyale dönüştüren işlevi rxjs-interoptanıtan adlı yeni bir paketle birlikte gelir . toSignalBu yazıda, bu yeni özelliğe ve kullanımına daha yakından bakacağız.

Fonksiyonu kullanmaya başlamak için toSignalonu modülden içe aktarmamız gerekiyor @angular/core/rxjs-interop. İşte kullanımını gösteren örnek bir kod parçacığı:

import { toSignal } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';

@Component({
  standalone: true,
  template:`{{ counter() }}`,
})
export class FooComponent {
  counter$ = interval(1000);
  counter = toSignal(this.counter$);
}

asyncBorudan farklı olarak, üretebilen bileşenimizde sinyalin değerini hemen okuyabileceğimizi belirtmekte fayda var undefined.

Ayrıca, toSignalişlev gözlemlenebilir olana hemen abone olur , bu da bazı durumlarda yan etkiler varsa istenmeyen sonuçlara neden olabilir.

asyncYönerge ile boruyu kullanan bir kodumuz varsa ngIf, yalnızca şablonu oluşturduğumuzda gözlemlenebilire abone olacaktır.

@Component({
  standalone: true,
  template:`<div *ngIf="someCondition">
     <div *ngFor="let item of source$ | async"></div>
  </div>`,
})
export class FooComponent {
  source$ = inject(Service).someMethod();
}

undefinedSonuç sinyalimizden türü kaldırmak istiyorsak , iki seçeneğimiz var. İlki, asynchemen harekete geçmeyen bir gözlemlenebilirimiz olduğunda bir başlangıç ​​değeri iletmektir.

@Component({
  standalone: true,
  template:`{{ counter() }}`,
})
export class FooComponent {
  counter$ = interval(1000);
  counter = toSignal(this.counter$, { initialValue: 0 });
}

@Component({
  standalone: true,
  template:`{{ counter() }}`,
})
export class FooComponent {
  counter$ = interval(1000).pipe(startWith(0));
  counter = toSignal(this.counter$, { requireSync: true });
}

İşlev toSignalçağrıldığında, önce enjeksiyon bağlamında çağrıldığından emin olmak için kontrol eder . Değilse, bir hata atılacaktır. Bu , seçeneği kullandığımız veya açıkça ilettiğimiz durumlar dışında işlevi yalnızca işlev kullanılabilir olduğunda kullanabileceğimiz anlamına gelir .toSignalinject() manualCleanupinjector

Bunun nedeni, sarma içeriği yok edildiğinde Angular'ın abonelikten otomatik olarak çıkmasıdır. Bunu , işlevi veya açıkça sağlananı OnDestroykullanarak elde ettiği yeni kancayı kullanarak yapar :inject()injector

@Component({
  selector: 'foo',
  standalone: true,
  template:`{{ counter() }}`,
})
export class FooComponent {
  counter$ = interval(1000);
  counter: Signal<number | undefined>; 
  private injector = inject(Injector);

  ngOnInit() {
    this.counter = toSignal(this.counter$, { injector: this.injector } );
  }
}

@Component({
  standalone: true,
  template:`{{ counter() }}`,
})
export class FooComponent {
  counter$ = interval(1000).pipe(take(3));
  counter = toSignal(this.counter$, { manualCleanup: true });
}

@Component({
  standalone: true,
  template:`{{ counter() }}`,
})
export class FooComponent {
  counter$ = interval(1000);
  counter = toSignal(this.counter$, { initialValue: 0 });

  ngOnInit() {
    try {
      this.counter();
    } catch (e) {
      console.log(e);
    }
  }
}

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