Angular Academy · Ders

Sinyalleri ve RxJS'yi Bağlama

Birlikte çalışabilirlik ile sinyaller ve gözlemlenebilirler arasında köprü kurun

Sinyalleri ve RxJS'yi Bağlama, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

İki Reaktif Dünya

Angular uygulamaları sinyalleri (eşzamanlı, çekme tabanlı) ve RxJS Observable'larını (eşzamansız, itme tabanlı akışlar) birlikte kullanır. @angular/core/rxjs-interop paketi, toSignal ve toObservable ile bunlar arasında köprü kurar.

toSignal Temelleri

toSignal() bir Observable'a abone olur ve en son değerini salt okunur bir sinyal olarak sunar. Enjeksiyon bağlamı yok edildiğinde abonelikten otomatik olarak çıkar.

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

clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}

initialValue ve Eşzamanlı Okumalar

Observable'lar eşzamanlı olarak değer üretmeyebilir; bu nedenle sinyalin bir başlangıç değerine ihtiyacı vardır. initialValue sağlayın veya kaynağın hemen değer üreteceği garanti ediliyorsa (örneğin bir BehaviorSubject) requireSync: true kullanın.

value = toSignal(this.behaviorSubject$, { requireSync: true });

async Boru Hattını Değiştirme

toSignal çoğu zaman async boru hattının yerini alır. data$ | async yerine doğrudan data() okursunuz; bu kullanım computed() ile sorunsuzca birleştirilebilir.

private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);

toObservable Temelleri

toObservable() bir sinyali, sinyal her değiştiğinde değer üreten bir Observable'a dönüştürür. debounceTime veya switchMap gibi RxJS işleçlerine ihtiyaç duyduğunuzda kullanışlıdır.

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

query = signal('');
query$ = toObservable(this.query);

Gecikmeli Arama Boru Hattı

Her iki yönü birleştirin: bir sinyal toObservable'ı besler, RxJS gecikme uygular ve bir HTTP çağrısına geçiş yapar, toSignal ise sonuçları yeniden sinyale dönüştürür.

query = signal('');
results = toSignal(
  toObservable(this.query).pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(q => this.api.search(q))
  ), { initialValue: [] }
);

Enjeksiyon Bağlamı

Her iki yardımcı da bir enjeksiyon bağlamına ihtiyaç duyar (yaşam döngüsüne bağlı abonelikleri yönetirler). Bunları alan başlatıcıları olarak çağırın veya daha sonra çağıracaksanız açık bir injector iletin.

constructor() {
  this.data = toSignal(this.source$); // ok: in constructor
}

Hata İşleme

Kaynak Observable hata verirse toSignal okuma sırasında hatayı yeniden fırlatır. Sinyalin kullanılabilir bir değeri koruması için hataları boru hattının içinde catchError ile işleyin.

results = toSignal(
  toObservable(this.query).pipe(
    switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
  ), { initialValue: [] }
);

toObservable Zamanlaması

toObservable perde arkasında bir etki kullandığından değerler eşzamanlı olarak değil, bir sonraki mikro görevde iletilir. Hızlı sinyal değişiklikleri birleştirilerek yalnızca en güncel değere indirgenir.

Hangisi Ne Zaman Kullanılmalı

Zamana dayalı veya üst düzey işleçlere ihtiyaç duyduğunuzda toObservable kullanın. Herhangi bir akışı şablonlarda ve elle abonelik oluşturmadan hesaplanmış okuma modellerinde tüketmek için toSignal kullanın.

Temizleme Otomatiktir

Her iki yardımcı da aboneliklerini enjeksiyon bağlamının yaşam döngüsüne bağlar. Bileşen veya hizmet yok edildiğinde abonelik sonlandırılır; böylece elle unsubscribe() çağırmadan sızıntılar önlenir.

Hızlı Kontrol

Birlikte çalışabilirlik bilginizi kontrol edin.

Özet

Sinyaller ile RxJS arasında köprü kurdunuz: toSignal akışları salt okunur sinyaller olarak tüketir (initialValue/requireSync ile), toObservable ise sinyalleri RxJS işleçleri için akış olarak sunar. Abonelikler enjeksiyon bağlamı aracılığıyla otomatik olarak temizlenir.

Sıkça Sorulan Sorular

“Sinyalleri ve RxJS'yi Bağlama” dersi ücretsiz mi?

Evet — “Sinyalleri ve RxJS'yi Bağlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Sinyalleri ve RxJS'yi Bağlama” dersinde ne öğreneceğim?

Birlikte çalışabilirlik ile sinyaller ve gözlemlenebilirler arasında köprü kurun Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Sinyalleri ve RxJS'yi Bağlama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön