Bagaimanakah penghalaan berfungsi dalam Angular?

Question

Accepted Answer

**Angular Router** memetakan laluan URL ke komponen, memungkinkan navigasi dalam aplikasi satu halaman **tanpa reload halaman lengkap**. Anda menentukan larik konfigurasi rute yang menghubungkan laluan ke komponen. ## Menentukan rute ```ts import { Routes } from "@angular/router"; export const routes: Routes = [ { path: "", component: HomeComponent }, { path: "users", component: UserListComponent }, { path: "users/:id", component: UserDetailComponent }, // route parameter { path: "admin", loadComponent: () => import("./admin.component").then(m => m.AdminComponent) }, // lazy { path: "**", component: NotFoundComponent }, // wildcard (404) ]; ``` ## Tempat komponen yang dialihkan dirender ```html ``` ## Navigasi dengan pautan ```html Users View {{ user.name }} ``` `routerLink` melakukan navigasi sisi klien (tanpa reload), dan `routerLinkActive` menambahkan kelas CSS ketika rute pautan aktif — berguna untuk penyorotan navigasi. ## Navigasi secara terprogram ```ts import { Router } from "@angular/router"; export class LoginComponent { constructor(private router: Router) {} onLogin() { this.router.navigate(["/dashboard"]); // navigate after an action } } ``` ## Membaca parameter rute ```ts import { ActivatedRoute } from "@angular/router"; export class UserDetailComponent implements OnInit { constructor(private route: ActivatedRoute) {} ngOnInit() { // read :id from the URL (params is an Observable, since it can change) this.route.params.subscribe(p => this.userId = p["id"]); // or snapshot for a one-time read: const id = this.route.snapshot.paramMap.get("id"); } } ``` ## Fitur lainnya ```text Nested/child routes, route guards (auth), resolvers (pre-fetch data), query params, and lazy loading of feature routes for code splitting. ``` ## Mengapa ini penting Router adalah yang mengubah Angular menjadi SPA multi-pandangan — navigasi sisi klien yang cepat, UI yang didorong URL, dan halaman yang dapat dipautkan dalam. Mengetahui konfigurasi rute, ``, `routerLink` vs `Router.navigate` secara terprogram, dan membaca param melalui `ActivatedRoute` mencakup kebutuhan penghalaan sehari-hari dari aplikasi Angular apa pun, dengan penjaga dan pemuatan malas dibangun di atas dasar ini.