Linki do routingu w Angularze

W poprzednich lekcjach wpisywaliśmy URL ręcznie w pasek adresu. Stwórzmy teraz linki, których kliknięcie będzie wyświetlać różne komponenty.

Aby to zrobić, będziemy tworzyć linki w specjalny sposób. Chodzi o to, że nie potrzebujemy prawdziwego przejścia przez linki. Po prostu chcemy, aby Angular pokazał inny komponent, zmienił URL w pasku adresu przeglądarki i przy tym nie odświeżył strony.

Dlatego zamiast natywnego atrybutu href będziemy używać atrybutu Angulara RouterLink.

Aby to zrobić, musimy go zaimportować:

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

Zadeklarować w dekoratorze:

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

Teraz możemy stworzyć nasze linki:

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