Kuinka reititys toimii Angularissa?

Question

Accepted Answer

**Angular Router** kartoittaa URL-polut komponentteihin, mikä mahdollistaa navigoinnin single-page-sovelluksessa **ilman täydellistä sivun uudelleenlatausta**. Määrität reitityskonfiguraatiotaulukon, joka yhdistää polut komponentteihin. ## Reittien määrittäminen ```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) ]; ``` ## Mistä reitityt komponentit hahmonnetaan ```html ``` ## Navigointi linkeillä ```html Users View {{ user.name }} ``` `routerLink` suorittaa asiakkaanpuolella olevan navigoinnin (ei uudelleenlatausta), ja `routerLinkActive` lisää CSS-luokan, kun linkin reitti on aktiivinen — kätevä navigoinnin korostamiseen. ## Ohjelmallinen navigointi ```ts import { Router } from "@angular/router"; export class LoginComponent { constructor(private router: Router) {} onLogin() { this.router.navigate(["/dashboard"]); // navigate after an action } } ``` ## Reittiparametrien lukeminen ```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"); } } ``` ## Muut ominaisuudet ```text Nested/child routes, route guards (auth), resolvers (pre-fetch data), query params, and lazy loading of feature routes for code splitting. ``` ## Miksi se on tärkeää Router on se, joka muuttaa Angularin monin näkymin varustetuksi SPA:ksi — nopea asiakkaanpuolella oleva navigointi, URL-ohjattu käyttöliittymä ja syvästi linkitettävät sivut. Reitityskonfiguraation, ``, `routerLink` vs ohjelmallisen `Router.navigate` ja parametrien lukeminen `ActivatedRoute`:n kautta kattaa minkä tahansa Angular-sovelluksen päivittäiset reititystarpeet, ja vartiointijärjestelmät sekä laisva lataus rakentavat tälle pohjalle.