Menyambungkan Signal dan RxJS
Jambatankan signal dan pemerhatian dengan kesalingoperasian.
Menyambungkan Signal dan RxJS ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Dua Dunia Reaktif
Aplikasi Angular menggabungkan isyarat (segerak, berasaskan tarik) dan Observable RxJS (tak segerak, strim berasaskan tolak). Pakej @angular/core/rxjs-interop merapatkan kedua-duanya dengan toSignal dan toObservable.
Asas toSignal
toSignal() melanggan Observable dan mendedahkan nilai terkininya sebagai isyarat baca sahaja. Ia berhenti melanggan secara automatik apabila konteks suntikan dimusnahkan.
import { toSignal } from '@angular/core/rxjs-interop';
clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}initialValue dan Bacaan Segerak
Observable mungkin tidak mengeluarkan nilai secara segerak, jadi isyarat memerlukan nilai permulaan. Berikan initialValue, atau gunakan requireSync: true apabila sumber dijamin mengeluarkan nilai dengan serta-merta (seperti BehaviorSubject).
value = toSignal(this.behaviorSubject$, { requireSync: true });Menggantikan Paip async
toSignal sering menggantikan paip async. Daripada data$ | async, anda membaca data() secara terus, yang mudah digabungkan dengan computed().
private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);Asas toObservable
toObservable() menukarkan isyarat kepada Observable yang mengeluarkan nilai setiap kali isyarat berubah. Ini berguna apabila anda memerlukan operator RxJS seperti debounceTime atau switchMap.
import { toObservable } from '@angular/core/rxjs-interop';
query = signal('');
query$ = toObservable(this.query);Saluran Carian dengan Nyahpantulan
Gabungkan kedua-dua arah: isyarat membekalkan nilai kepada toObservable, RxJS melakukan nyahpantulan dan bertukar kepada panggilan HTTP, kemudian toSignal menukarkan hasilnya kembali kepada isyarat.
query = signal('');
results = toSignal(
toObservable(this.query).pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => this.api.search(q))
), { initialValue: [] }
);Konteks Suntikan
Kedua-dua pembantu memerlukan konteks suntikan (mereka mengurus langganan yang terikat pada kitar hayat). Panggilnya sebagai pemula medan atau hantarkan injector yang jelas jika memanggilnya kemudian.
constructor() {
this.data = toSignal(this.source$); // ok: in constructor
}Pengendalian Ralat
Jika Observable sumber menghasilkan ralat, toSignal akan melemparkannya semula semasa bacaan. Kendalikan ralat di dalam saluran dengan catchError supaya isyarat terus mempunyai nilai yang boleh digunakan.
results = toSignal(
toObservable(this.query).pipe(
switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
), { initialValue: [] }
);Masa toObservable
toObservable menggunakan kesan di sebalik tabir, jadi keluaran dihantar pada tugas mikro seterusnya, bukan secara segerak. Perubahan isyarat yang pantas digabungkan kepada nilai terkini.
Bila Hendak Menggunakan Yang Mana
Gunakan toObservable apabila anda memerlukan operator berasaskan masa atau operator tertib lebih tinggi. Gunakan toSignal untuk menggunakan sebarang strim dalam templat dan model bacaan terkomput tanpa langganan manual.
Pembersihan Berlaku Secara Automatik
Kedua-dua pembantu mengikat langganan mereka pada kitar hayat konteks suntikan. Apabila komponen atau perkhidmatan dimusnahkan, langganan tersebut ditamatkan, lalu mencegah kebocoran tanpa unsubscribe() manual.
Semakan Pantas
Semak pengetahuan anda tentang kesalingoperasian.
Imbas Kembali
Anda telah merapatkan isyarat dan RxJS: toSignal menggunakan strim sebagai isyarat baca sahaja (dengan initialValue/requireSync), manakala toObservable mendedahkan isyarat sebagai strim untuk operator RxJS. Langganan dibersihkan secara automatik melalui konteks suntikan.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 38
- Pelajaran
- 144
Soalan Lazim
Adakah pelajaran “Menyambungkan Signal dan RxJS” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Menyambungkan Signal dan RxJS”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Menyambungkan Signal dan RxJS”?
Jambatankan signal dan pemerhatian dengan kesalingoperasian. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Menyambungkan Signal dan RxJS” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Signal Store dalam Perkhidmatan
- Menerbitkan Keadaan dengan computed
- Mengemas Kini Keadaan Secara Tidak Berubah
- Menyambungkan Signal dan RxJS