Panduan tentang cara menggunakan Subjek RxJS dan BehaviourSubject RxJS untuk berkomunikasi antara komponen Angular.Pada artikel ini, saya akan menggunakan RxJS untuk menunjukkan bagaimana komponen berinteraksi ketika mereka tidak saling kenal atau tidak memiliki hubungan orangtua / anak yang sama.
Konten:
- Masalah
- Metode 1: Transportasi Acara
- Metode 2: Pengamat Layanan
- Aplikasi
Masalah
Dalam banyak kerangka kerja, termasuk Angular, masalah interaksi komponen selalu muncul ketika kami membagi aplikasi menjadi banyak komponen UI kecil dan mengikat elemen induk dari elemen induk untuk mendengarkan acara.
Di Angular, kami menggunakan Output () dan Input (). Dalam kasus standar, ini sudah cukup, tetapi ketika Anda harus mengaitkan data masuk dan acara keluar dengan komponen induk, mengelola semua ini berubah menjadi mimpi buruk.
Anda perlu menambahkan banyak Input () dan Output () ke banyak level komponen - ini membutuhkan banyak usaha, berisiko dan tidak selalu berfungsi.
Salah satu solusinya adalah menggunakan manajer negara seperti Redux, NGRX, atau NGXS untuk membantu komponen yang tidak berhubungan berkomunikasi.
Dalam artikel ini, saya akan memperkenalkan dua cara tambahan untuk mengatasi masalah ini yang tidak memerlukan penggunaan perpustakaan tambahan.
- Transportasi acara menggunakan Subjek.
- Pengamat Layanan Menggunakan Subjek Perilaku.
Untuk mendemonstrasikan solusi ini, saya akan membuat
contoh di mana pengguna dapat mengklik item daftar artikel dan menampilkan detail di komponen lain.
Metode 1: Transportasi Acara
Konsepnya sangat sederhana. Anda membuat layanan yang acara-acaranya akan tersedia di mana saja.
Layanan mendistribusikan acara, dan pelanggan dapat melakukan fungsi panggilan balik saat suatu peristiwa terjadi. Pada artikel ini, saya akan membuat Transport Acara menggunakan Subjek RsJS.
Setiap kali pengguna mengklik pada item daftar artikel, ia menghasilkan suatu peristiwa dan mentransmisikannya menggunakan Transportasi Acara.
Kode ini berarti bahwa kami mengirim acara SelectArticleDetail bersama dengan informasi artikel.
Pendengar akan mendengarkan SelectArticleDetail dan melakukan panggilan balik, mentransfer data artikel ke variabel lokal dan menampilkannya di antarmuka pengguna.
Metode 2: Pengamat Layanan
Idenya adalah untuk hanya menciptakan cara untuk mentransfer data dari dalam. Artinya, setiap kali nilai berubah, pengamat mengetahui hal ini dan melakukan fungsi panggilan balik.
Setiap kali pengguna mengklik item daftar, ia menambahkan artikel ke repositori.
Sekarang, di komponen komponen, kami akan berlangganan pembaruan repositori untuk mendapatkan nilai baru.
Aplikasi
Saya telah menerapkan pendekatan ini di banyak proyek. Berikut adalah beberapa contoh di mana ini sangat tepat:
- Transport peristiwa: Saya ingin menggunakan jendela modal yang sama untuk menampilkan informasi pengguna tentang keadaan aplikasi setiap kali dia mengklik tombol
- Transport peristiwa: Jika Anda menggunakan repositori mono dengan beberapa kerangka kerja, akan lebih mudah untuk menggunakan pendekatan ini untuk bertukar peristiwa di antara kerangka kerja atau untuk mendistribusikan acara dari Angular ke JavaScript asli
- Transport peristiwa dan pengamat layanan untuk komponen bersarang: sulit menggunakan Input () dan Output () untuk menghubungkan data masuk / keluar dan peristiwa UI komponen D dengan komponen UI B, dengan komponen UI C dan c komponen induk A ketika berinteraksi dengan API
Jika Anda memiliki lebih banyak contoh, saya akan senang mengetahui tentang mereka. Belajar dari orang lain adalah cara terbaik untuk meningkatkan.
Untuk meringkas
Artikel ini adalah tentang dua cara berinteraksi antara dua atau lebih komponen yang tidak terkait.
Kami menggunakan Pengamat Layanan untuk berlangganan data untuk kasus-kasus sederhana, dan menggunakan Transportasi Acara untuk mengirim acara yang berbeda ke pendengar yang berbeda.
Semoga artikel ini bermanfaat! Ikuti saya di
Medium dan
Twitter . Jangan ragu untuk berkomentar dan mengajukan pertanyaan. Saya akan dengan senang hati membantu!