Subject dan BehaviorSubject
Multicast nilai dengan subject.
Subject dan BehaviorSubject adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Apa itu Subject
Subject adalah Observable sekaligus Observer. Anda dapat melakukan subscribe padanya dan juga memasukkan nilai dengan next(). Subject melakukan multicast: semua subscriber menerima emisi yang sama.
Membuat dan menggunakan Subject
Subscriber yang ditambahkan setelah suatu nilai dipancarkan tidak akan menerima nilai-nilai sebelumnya.
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: worldSubject melakukan multicast
Berbeda dengan observable dingin yang berjalan secara terpisah untuk setiap subscriber, Subject membagikan satu eksekusi. Setiap subscriber mendapatkan nilai yang sama pada waktu yang sama.
BehaviorSubject
BehaviorSubject memerlukan nilai awal dan mengingat nilai terbaru. Subscriber baru langsung menerima nilai saat ini.
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)Membaca nilai saat ini
BehaviorSubject menyediakan nilai saat ini secara sinkron melalui .value atau .getValue(). Subject biasa tidak memiliki kemampuan ini.
const state$ = new BehaviorSubject({ loggedIn: false });
console.log(state$.value); // { loggedIn: false }
state$.next({ loggedIn: true });
console.log(state$.getValue()); // { loggedIn: true }Subject sebagai penyimpanan sederhana
BehaviorSubject adalah wadah state ringan yang umum digunakan dalam layanan Angular: menyimpan state, mengeksposnya sebagai observable hanya-baca, dan mendorong pembaruan dengan next.
class CounterService {
private count$ = new BehaviorSubject(0);
readonly value$ = this.count$.asObservable();
increment() { this.count$.next(this.count$.value + 1); }
}asObservable untuk enkapsulasi
Ekspos .asObservable() agar konsumen dapat melakukan subscribe, tetapi tidak dapat memanggil next() dan merusak state Anda.
private data$ = new Subject<number>();
readonly stream$ = this.data$.asObservable();
// consumers: stream$.subscribe(...) but no stream$.next()ReplaySubject
ReplaySubject memutar ulang sejumlah nilai sebelumnya yang dapat dikonfigurasi kepada subscriber baru—berguna untuk menyimpan sementara N peristiwa terakhir.
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, 3Subject vs BehaviorSubject
Subject: tidak memiliki nilai awal, subscriber yang datang terlambat akan melewatkan emisi sebelumnya.
BehaviorSubject: memiliki nilai awal, subscriber yang datang terlambat mendapatkan nilai terbaru. Untuk state UI, BehaviorSubject biasanya merupakan pilihan yang Anda perlukan.
Menyelesaikan Subject
Panggil complete() untuk mengakhiri Subject. Setelah selesai, nilai dari next() diabaikan dan subscriber dilepas. Selalu selesaikan Subject dalam layanan yang dihancurkan.
const s$ = new Subject<number>();
s$.subscribe(v => console.log(v));
s$.next(1);
s$.complete();
s$.next(2); // ignoredSubject menjembatani imperatif dan reaktif
Subject memungkinkan Anda mengubah peristiwa imperatif (penangan klik tombol, pesan WebSocket) menjadi aliran observable yang dapat ditanggapi secara deklaratif oleh bagian lain aplikasi Anda.
Pemeriksaan Singkat
Uji pemahaman Anda tentang Subject.
Ringkasan: Subject & BehaviorSubject
Subject adalah aliran multicast yang dapat Anda isi.
Subject: tidak menyimpan nilai sebelumnya.BehaviorSubject: menyimpan dan memutar ulang nilai terbaru; memiliki.value.ReplaySubject: memutar ulang N nilai terakhir.- Ekspos dengan
asObservable()untuk melindungi state.
Berikutnya: berhenti berlangganan dan kebocoran memori.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Subject dan BehaviorSubject” gratis?
Ya — teks lengkap “Subject dan BehaviorSubject” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Subject dan BehaviorSubject”?
Multicast nilai dengan subject. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Subject dan BehaviorSubject” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Observable dan Subscription
- Subject dan BehaviorSubject
- Berhenti Berlangganan dan Kebocoran Memori
- Pipe async