Angular Academy · Ders

Subject'ler ve BehaviorSubject

Değerleri subject'lerle çok noktaya yayınlayın.

2. ders / 413 adım

Subject'ler ve BehaviorSubject, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. 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.

Subject Nedir

Subject, hem Observable hem de Observer'dır. Buna abone olabilir ve next() ile içine değer gönderebilirsiniz. Çoklu yayın yapar: tüm aboneler aynı yayımları alır.

Subject Oluşturma ve Kullanma

Bir değer yayımlandıktan sonra eklenen aboneler geçmiş değerleri almaz.

import { Subject } from 'rxjs';

const events$ = new Subject<string>();
events$.subscribe(v => console.log('A:', v));

events$.next('hello'); // A: hello
events$.subscribe(v => console.log('B:', v));
events$.next('world'); // A: world, B: world

Subject'ler Çoklu Yayın Yapar

Her abone için ayrı çalışan soğuk bir observable'ın aksine Subject tek bir yürütmeyi paylaşır. Her abone aynı değeri aynı anda alır.

BehaviorSubject

BehaviorSubject bir başlangıç değeri gerektirir ve en son değeri hatırlar. Yeni aboneler geçerli değeri hemen alır.

import { BehaviorSubject } from 'rxjs';

const count$ = new BehaviorSubject<number>(0);
count$.subscribe(v => console.log('A:', v)); // A: 0
count$.next(5);
count$.subscribe(v => console.log('B:', v)); // B: 5 (gets latest)

Geçerli Değeri Okuma

BehaviorSubject, geçerli değerini .value veya .getValue() aracılığıyla eşzamanlı olarak sunar. Sade Subject'lerde bu özellik yoktur.

const state$ = new BehaviorSubject({ loggedIn: false });
console.log(state$.value); // { loggedIn: false }
state$.next({ loggedIn: true });
console.log(state$.getValue()); // { loggedIn: true }

Basit Bir Mağaza Olarak Subject

BehaviorSubject, Angular servislerinde yaygın ve hafif bir durum kapsayıcısıdır: durumu tutar, salt okunur bir observable olarak dışa sunar ve next ile güncellemeleri gönderir.

class CounterService {
  private count$ = new BehaviorSubject(0);
  readonly value$ = this.count$.asObservable();
  increment() { this.count$.next(this.count$.value + 1); }
}

Kapsülleme için asObservable

Tüketicilerin abone olabilmesi, ancak next() çağırarak durumunuzu bozamaması için .asObservable() kullanarak dışa sunun.

private data$ = new Subject<number>();
readonly stream$ = this.data$.asObservable();
// consumers: stream$.subscribe(...) but no stream$.next()

ReplaySubject

ReplaySubject, yapılandırılabilir sayıdaki geçmiş değeri yeni abonelere yeniden yayımlar; son N olayı önbelleğe almak için kullanışlıdır.

import { ReplaySubject } from 'rxjs';

const recent$ = new ReplaySubject<number>(2); // buffer last 2
recent$.next(1); recent$.next(2); recent$.next(3);
recent$.subscribe(v => console.log(v)); // 2, 3

Subject ve BehaviorSubject

Subject: başlangıç değeri yoktur, geç abone olanlar geçmiş yayımları kaçırır.
BehaviorSubject: başlangıç değeri vardır, geç abone olanlar en son değeri alır. Kullanıcı arayüzü durumu için genellikle BehaviorSubject kullanmalısınız.

Subject'i Tamamlama

Subject'i sonlandırmak için complete() çağırın. Tamamlandıktan sonra next() değerleri yok sayılır ve aboneler serbest bırakılır. Yok edilen servislerdeki Subject'leri her zaman tamamlayın.

const s$ = new Subject<number>();
s$.subscribe(v => console.log(v));
s$.next(1);
s$.complete();
s$.next(2); // ignored

Subject'ler Zorunlu ve Reaktif Yaklaşımları Birleştirir

Subject'ler, zorunlu olayları (bir düğme tıklama işleyicisi veya WebSocket mesajı) uygulamanızın geri kalanının bildirimsel olarak tepki verebileceği bir observable akışına dönüştürmenizi sağlar.

Kısa Kontrol

Subject'ler hakkındaki anlayışınızı sınayın.

İnteraktif derste cevapla

Özet: Subject'ler ve BehaviorSubject

Subject'ler, içine değer gönderebildiğiniz çoklu yayın akışlarıdır.

Subject: geçmiş değerleri hatırlamaz.
BehaviorSubject: en son değeri tutar ve yeniden yayımlar; .value özelliğine sahiptir.
ReplaySubject: son N değeri yeniden yayımlar.
Durumu korumak için asObservable() ile dışa sunun.

Sırada: abonelikten çıkma ve bellek sızıntıları.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 38
Dersler: 144

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Subject'ler ve BehaviorSubject” dersi ücretsiz mi?

Evet — “Subject'ler ve BehaviorSubject” 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.

“Subject'ler ve BehaviorSubject” dersinde ne öğreneceğim?

Değerleri subject'lerle çok noktaya yayınlayın. 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 2. dersidir.

“Subject'ler ve BehaviorSubject” 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