Kaip veikia maršrutizacija Angular?

Question

Accepted Answer

**Angular Router** susieja URL kelius su komponentais, sudarydama galimybę naršyti vieno puslapio programoje **be viso puslapio perkrovimo**. Jūs apibrėžiate maršruto konfigūracijos masyvą, susiejantį kelius su komponentais. ## Maršrutų apibrėžimas ```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) ]; ``` ## Kur pateikiami maršrutizuoti komponentai ```html ``` ## Naršymas naudojant nuorodas ```html Users View {{ user.name }} ``` `routerLink` atlieka kliento pusės naršymą (be perkrovimo), o `routerLinkActive` prideda CSS klasę, kai nuorodos maršrutas yra aktyvus — naudinga navigacijos žymėjimui. ## Programinis naršymas ```ts import { Router } from "@angular/router"; export class LoginComponent { constructor(private router: Router) {} onLogin() { this.router.navigate(["/dashboard"]); // navigate after an action } } ``` ## Maršruto parametrų skaitymas ```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"); } } ``` ## Kitos funkcijos ```text Nested/child routes, route guards (auth), resolvers (pre-fetch data), query params, and lazy loading of feature routes for code splitting. ``` ## Kodėl tai svarbu Router yra tai, kas Angular paverčia daugiavaizdine SPA — greitas kliento pusės naršymas, URL valdomas UI ir giliomis nuorodomis susietos puslapiai. Žinojimas apie maršruto konfigūraciją, ``, `routerLink` ir programinį `Router.navigate`, bei parametrų skaitymas per `ActivatedRoute` apima kasdienines bet kurios Angular programos maršrutizacijos poreikius, o apsaugos ir pigios sistemos kūrimas yra pastatytas ant šios pagrindų.