Angular Academy · Pelajaran

Peristiwa Router dan Navigasi

Tanggapi peristiwa siklus hidup navigasi.

Pelajaran 4 dari 413 langkah

Peristiwa Router dan Navigasi 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.

Aliran peristiwa router

Router.events adalah observable yang memancarkan peristiwa selama siklus hidup navigasi: mulai, pengenalan, pemeriksaan guard, resolusi, dan selesai. Berlanggananlah untuk merespons navigasi secara global.

Jenis peristiwa utama

Peristiwa umum: NavigationStart, NavigationEnd, NavigationCancel, NavigationError. Masing-masing merupakan instans kelas yang dapat Anda filter.

Memantau NavigationEnd

Filter aliran ke jenis peristiwa tertentu dengan filter dan pemeriksaan instanceof.

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

const router = inject(Router);
router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(e => console.log('navigated to', e.urlAfterRedirects));

Indikator pemuatan global

Tampilkan pemutar selama interval antara NavigationStart dan NavigationEnd/Cancel/Error.

router.events.subscribe(e => {
  if (e instanceof NavigationStart) this.loading = true;
  if (e instanceof NavigationEnd ||
      e instanceof NavigationCancel ||
      e instanceof NavigationError) this.loading = false;
});

Menggulir ke atas saat navigasi

Atur ulang posisi gulir setelah setiap navigasi yang berhasil. (Fitur bawaan scrollPositionRestoration juga tersedia.)

router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(() => window.scrollTo(0, 0));

Pelacakan halaman untuk analitik

NavigationEnd adalah kait yang ideal untuk mencatat tampilan halaman ke analitik.

router.events.pipe(
  filter((e): e is NavigationEnd => e instanceof NavigationEnd)
).subscribe(e => analytics.pageView(e.urlAfterRedirects));

Navigasi terprogram

router.navigate menerima array perintah; router.navigateByUrl menerima string URL lengkap. Keduanya mengembalikan promise yang diselesaikan menjadi hasil apakah navigasi berhasil.

router.navigate(['/user', 42]);
router.navigateByUrl('/search?q=ng');

const ok = await router.navigate(['/home']);
console.log('success?', ok);

Navigasi relatif

Gunakan relativeTo untuk bernavigasi secara relatif terhadap rute saat ini, misalnya dari komponen anak.

const route = inject(ActivatedRoute);
router.navigate(['../sibling'], { relativeTo: route });

routerLink dan status aktif

Dalam templat, routerLink menangani navigasi secara deklaratif, sedangkan routerLinkActive menambahkan kelas CSS ke tautan yang aktif.

<a routerLink="/home" routerLinkActive="active">Home</a>
<a [routerLink]="['/user', userId]"
   routerLinkActive="active">Profile</a>

Penanganan NavigationError

Berlanggananlah ke NavigationError untuk menangani navigasi yang gagal (misalnya resolver atau pemuatan lambat yang gagal) dan menampilkan pesan yang mudah dipahami.

router.events.pipe(
  filter(e => e instanceof NavigationError)
).subscribe(e => console.error('nav failed', e.error));

Pemfilteran peristiwa bertipe

Angular juga menyediakan pengetikan RouterEvent; predicate penjaga tipe dalam filter memberi Anda peristiwa dengan tipe yang benar di subscriber tanpa perlu melakukan casting.

Pemeriksaan Singkat

Uji pemahaman Anda tentang peristiwa router.

Jawab di pelajaran interaktif

Ringkasan: Peristiwa Router & Navigasi

Router.events mengekspos siklus hidup navigasi.

Filter NavigationStart/End/Cancel/Error.
Gunakan untuk mengendalikan pemutar pemuatan, pengaturan ulang gulir, dan analitik.
Lakukan navigasi melalui navigate/navigateByUrl atau routerLink.

Anda telah menyelesaikan Angular Router Lanjutan.

Gratis untuk memulai

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

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Peristiwa Router dan Navigasi” gratis?

Ya — teks lengkap “Peristiwa Router dan Navigasi” 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 “Peristiwa Router dan Navigasi”?

Tanggapi peristiwa siklus hidup navigasi. 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 “Peristiwa Router dan Navigasi” 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

← Kembali ke Angular Academy