Como funciona o roteamento no Angular?

Question

Accepted Answer

O **Angular Router** mapeia caminhos de URL para componentes, permitindo navegação em um aplicativo de página única **sem recarregar a página inteira**. Você define um array de configuração de rota vinculando caminhos a componentes. ## Definindo rotas ```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) ]; ``` ## Onde os componentes roteados são renderizados ```html ``` ## Navegando com links ```html Users View {{ user.name }} ``` `routerLink` executa navegação no lado do cliente (sem recarga), e `routerLinkActive` adiciona uma classe CSS quando a rota do link está ativa — útil para destaque de navegação. ## Navegando programaticamente ```ts import { Router } from "@angular/router"; export class LoginComponent { constructor(private router: Router) {} onLogin() { this.router.navigate(["/dashboard"]); // navigate after an action } } ``` ## Lendo parâmetros de rota ```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"); } } ``` ## Outros recursos ```text Nested/child routes, route guards (auth), resolvers (pre-fetch data), query params, and lazy loading of feature routes for code splitting. ``` ## Por que isso importa O Router é o que transforma Angular em um SPA com múltiplas visualizações — navegação rápida no lado do cliente, interface do usuário orientada por URL e páginas com link profundo. Conhecer a configuração de rota, ``, `routerLink` versus `Router.navigate` programático e ler parâmetros via `ActivatedRoute` cobre as necessidades diárias de roteamento de qualquer aplicativo Angular, com proteções e carregamento lento construindo-se sobre essa base.