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:

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

Declarar no decorador:

@Component({
	......
	imports: [RouterOutlet, RouterLink],
	......
})

Agora podemos criar nossos links:

<nav>
	<a routerLink="/aaaa/">
		Aaaa
	</a>
	<a routerLink="/bbbb/">
		Bbbb
	</a>
</nav>

Crie links que alternem entre os seus componentes.