Enlaces para enrutamiento en Angular

En lecciones anteriores ingresamos la URL manualmente en la barra de direcciones. Ahora creemos enlaces, al hacer clic en los cuales se mostrarán varios componentes.

Para esto, crearemos los enlaces de una manera especial. El caso es que no necesitamos una verdadera navegación por los enlaces. Simplemente queremos que Angular muestre otro componente, cambie la URL en la barra de direcciones del navegador y, al mismo tiempo, no actualice la página.

Por lo tanto, en lugar del atributo nativo href usaremos el atributo de Angular RouterLink.

Para ello, necesitamos importarlo:

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

Especificar en el decorador:

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

Ahora podemos crear nuestros enlaces:

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

Cree enlaces que alternen sus componentes.