Link-uri pentru rutare în Angular

În lecțiile anterioare, am introdus manual URL-ul în bara de adresă. Să creăm acum link-uri, a căror navigare va afija diverse componente.

Pentru aceasta, vom face link-uri într-un mod special. chestia este că nu avem nevoie de o navigare reală pe link-uri. Doar vrem ca Angular să afișeze altă componentă, să modifice URL-ul în bara de adresă a browser-ului și, în același timp, să nu reîmprospăteze pagina.

De aceea, în loc de atributul nativ href vom folosi atributul Angular RouterLink.

Pentru aceasta, trebuie să îl importăm:

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

Să declarăm în decorator:

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

Acum putem face link-urile noastre:

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