Menghubungkan Signal dan RxJS
Jembatani signal dan observable dengan interoperabilitas.
Menghubungkan Signal dan RxJS adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Dua Dunia Reaktif
Aplikasi Angular memadukan signals (sinkron dan berbasis penarikan) dengan Observable RxJS (asinkron dan berbasis dorongan). Paket @angular/core/rxjs-interop menjembatani keduanya dengan toSignal dan toObservable.
Dasar-Dasar toSignal
toSignal() berlangganan ke Observable dan menyediakan nilai terbarunya sebagai signal hanya-baca. Fungsi ini berhenti berlangganan secara otomatis ketika konteks injeksi dihancurkan.
import { toSignal } from '@angular/core/rxjs-interop';
clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}initialValue dan Pembacaan Sinkron
Observable mungkin tidak memancarkan nilai secara sinkron, sehingga signal memerlukan nilai awal. Sediakan initialValue, atau gunakan requireSync: true ketika sumber dijamin memancarkan nilai segera (seperti BehaviorSubject).
value = toSignal(this.behaviorSubject$, { requireSync: true });Menggantikan Pipe async
toSignal sering menggantikan pipe async. Alih-alih data$ | async, Anda membaca data() secara langsung, yang dapat dikomposisikan dengan baik bersama computed().
private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);Dasar-Dasar toObservable
toObservable() mengubah signal menjadi Observable yang memancarkan nilai setiap kali signal berubah. Ini berguna ketika Anda memerlukan operator RxJS seperti debounceTime atau switchMap.
import { toObservable } from '@angular/core/rxjs-interop';
query = signal('');
query$ = toObservable(this.query);Pipeline Pencarian dengan Debounce
Gabungkan kedua arah: signal menjadi masukan bagi toObservable, RxJS menerapkan debounce lalu beralih ke panggilan HTTP, dan toSignal mengubah hasilnya kembali menjadi signal.
query = signal('');
results = toSignal(
toObservable(this.query).pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => this.api.search(q))
), { initialValue: [] }
);Konteks Injeksi
Kedua helper memerlukan konteks injeksi (keduanya mengelola langganan yang terikat pada siklus hidup). Panggil keduanya sebagai penginisialisasi field atau teruskan injector secara eksplisit jika dipanggil nanti.
constructor() {
this.data = toSignal(this.source$); // ok: in constructor
}Penanganan Error
Jika Observable sumber menghasilkan error, toSignal akan melemparkannya kembali saat dibaca. Tangani error di dalam pipeline dengan catchError agar signal tetap memiliki nilai yang dapat digunakan.
results = toSignal(
toObservable(this.query).pipe(
switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
), { initialValue: [] }
);Waktu toObservable
toObservable menggunakan effect di balik layar, sehingga emisi dikirim pada microtask berikutnya, bukan secara sinkron. Perubahan signal yang berlangsung cepat digabungkan menjadi nilai terbaru.
Kapan Menggunakan Masing-Masing
Gunakan toObservable ketika Anda memerlukan operator berbasis waktu atau operator tingkat tinggi. Gunakan toSignal untuk menggunakan stream apa pun di template dan model baca terhitung tanpa berlangganan secara manual.
Pembersihan Berlangsung Otomatis
Kedua helper mengaitkan langganannya dengan siklus hidup konteks injeksi. Ketika komponen atau layanan dihancurkan, langganan dihentikan sehingga kebocoran dapat dicegah tanpa unsubscribe() manual.
Pemeriksaan Singkat
Periksa pengetahuan Anda tentang interoperabilitas.
Ringkasan
Anda telah menjembatani signal dan RxJS: toSignal menggunakan stream sebagai signal hanya-baca (dengan initialValue/requireSync), sedangkan toObservable menyediakan signal sebagai stream untuk operator RxJS. Langganan dibersihkan secara otomatis melalui konteks injeksi.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 38
- Pelajaran
- 144
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menghubungkan Signal dan RxJS” gratis?
Ya — teks lengkap “Menghubungkan Signal dan RxJS” 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 “Menghubungkan Signal dan RxJS”?
Jembatani signal dan observable dengan interoperabilitas. 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 4 dari 4.
Berapa lama pelajaran “Menghubungkan Signal dan RxJS” 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
- Signal Store dalam Layanan
- Menurunkan State dengan computed
- Memperbarui State secara Imutabel
- Menghubungkan Signal dan RxJS