Linkovi za rutiranje u Angular-u

U prethodnim lekcijama smo ručno unosili URL u adresnu traku. Hajde sada da napravimo linkove čijim će klikanjem biti prikazane različite komponente.

Za ovo ćemo praviti linkove na poseban način. Stvar je u tome što nam nije potreban pravi prelazak po linkovima. Mi samo želimo da Angular prikaže drugu komponentu, promeni URL u adresnoj traci brauzera i da pritom ne osvežava stranicu.

Zbog toga ćemo umesto uobičajenog atributa href koristiti Angular-ov atribut RouterLink.

Za ovo nam je potrebno da ga importujemo:

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

Propisati u dekoratoru:

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

Sada možemo napraviti naše linkove:

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