Aula 9 de Angular

Roteamento

O roteamento no Angular permite navegar entre componentes com base na URL. Ele transforma a SPA (Single Page Application) em uma aplicação com múltiplas "páginas virtuais".

1. Configuração Inicial

Crie um módulo de roteamento ou use o AppRoutingModule:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SobreComponent } from './sobre/sobre.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'sobre', component: SobreComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. Definindo Áreas de Navegação

Use a diretiva <router-outlet> para indicar onde os componentes serão carregados.

<!-- app.component.html -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/sobre">Sobre</a>
</nav>

<router-outlet></router-outlet>

3. Redirecionamento

Você pode redirecionar rotas vazias ou erradas:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: PaginaNaoEncontradaComponent }
];

4. Roteamento com Parâmetros

4.1 Rota com parâmetro

const routes: Routes = [
  { path: 'produto/:id', component: ProdutoDetalheComponent }
];

4.2 Navegar com parâmetro

this.router.navigate(['/produto', 10]);

4.3 Ler parâmetro no componente

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const id = params.get('id');
    console.log('ID:', id);
  });
}

5. Query Params

5.1 Enviar:

this.router.navigate(['/produtos'], { queryParams: { categoria: 'teclados', precoMax: 500 } });

5.2 Ler:

this.route.queryParamMap.subscribe(params => {
  const categoria = params.get('categoria');
  const precoMax = params.get('precoMax');
});

6. Passagem de dados com `state`

6.1 Enviar:

this.router.navigate(['/perfil'], { state: { usuario: 'Carlos', nivel: 'admin' } });

6.2 Receber:

ngOnInit() {
  const usuario = history.state.usuario;
  const nivel = history.state.nivel;
  console.log(usuario, nivel);
}

7. Rotas Filhas

const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    children: [
      { path: 'usuarios', component: UsuariosComponent },
      { path: 'configuracoes', component: ConfiguracoesComponent }
    ]
  }
];

Em admin.component.html:

<router-outlet></router-outlet>

8. Lazy Loading (Carregamento Preguiçoso)

Usado para carregar módulos apenas quando necessário.

const routes: Routes = [
  {
    path: 'relatorios',
    loadChildren: () => import('./relatorios/relatorios.module').then(m => m.RelatoriosModule)
  }
];