Links para roteamento no Angular

Nas lições anteriores, digitamos o URL manualmente na barra de endereços. Vamos agora criar links que, ao serem clicados, mostrarão diferentes componentes.

Para isso, vamos criar os links de uma forma especial. A questão é que não precisamos de uma navegação real pelos links. Nós apenas desejamos que o Angular mostre outro componente, mude o URL na barra de endereços do navegador e, ao mesmo tempo, não recarregue a página.

Portanto, em vez do atributo nativo href usaremos o atributo do Angular RouterLink.

Para isso, precisamos importá-lo:

app/app.component.tsimport { RouterLink } from '@angular/router';

Declarar no decorador:

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink],
  ......
})

Agora podemos criar nossos links:

app/app.component.html<nav>
  <a routerLink="/aaaa/">
    Aaaa
  </a>
  <a routerLink="/bbbb/">
    Bbbb
  </a>
</nav>