Povezave za usmerjanje v Angular

V prejšnjih lekcijah smo ročno vnašali URL v naslovno vrstico. Zdaj pa naredimo povezave, s katerimi bomo prikazovali različne komponente.

Za to bomo povezave naredili na poseben način. Bistvo je v tem, da ne potrebujemo resničnega prehoda po povezavah. Želimo le, da Angular prikaže drugo komponento, spremeni URL v naslovni vrstici brskalnika in pri tem ne osveži strani.

Zato bomo namesto izvornega atributa href uporabili Angularjev atribut RouterLink.

Za to ga moramo uvoziti:

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

Določiti v dekoratorju:

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

Zdaj lahko naredimo naše povezave:

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