Cara menampilkan atau menyembunyikan komponen berdasarkan Route di Angular.

Nov 30 2022
Sebagai pengembang Frontend, Anda menemukan situasi di mana Anda harus menampilkan komponen hanya jika Anda menavigasi ke dasbor, atau komponen masuk Anda. Untuk istirahat, Anda harus bersembunyi.

Sebagai pengembang Frontend, Anda menemukan situasi di mana Anda harus menampilkan komponen hanya jika Anda menavigasi ke dasbor, atau komponen masuk Anda. Untuk istirahat, Anda harus bersembunyi.

Bagaimana Anda akan mengatur semua ini di sudut ??

Nah Angular memberi Anda berbagai peristiwa dan properti router yang dapat Anda gunakan untuk melacak di mana pengguna router saat ini.

Kita akan membahas event NavigationEnd dari rute Angular

Apa itu Akhir Navigasi??

Peristiwa dipicu saat navigasi berakhir dengan sukses.

Cara Penggunaan??

  • Di dalam konstruktor Anda berlangganan acara router.
  • Kemudian Anda akan memeriksa subscribed val adalah instance dari Navigation End atau not .
  • Jika ya maka Anda akan menggunakan nilai berlangganan itu dan menggunakan value.url untuk menemukan url tempat pengguna menavigasi saat ini dan memasukkan logika di dalamnya.
  • Akhirnya Anda akan menulis logika Anda sesuai dengan value.url

app.component.html saya terlihat seperti ini

Di sini Anda dapat melihat saya menampilkan tajuk hanya jika properti "showHeader" benar

App.component.ts saya terlihat seperti ini

Sekarang Jika saya mengklik tombol kirim, itu akan dialihkan ke 'dasbor'
dan menampilkan komponen dasbor.

* Oleh karena itu komponen header menjadi terlihat *

Repositori yang berfungsi untuk referensi
https://stackblitz.com/edit/angular-ivy-atods7?file=src/app/app.component.ts

Tautan Github
https://github.com/deepa314/angular-ivy-atods7.git

Saya harap ini membantu kalian :)
Jika Anda suka, silakan suka, bagikan, dan berlangganan