Веза за рутирање у Angular-у

У претходним лекцијама смо ручно уносили URL у адресну траку. Хајде сада да направимо везе, чији ће прелазак приказати различите компоненте.

За то ћемо правити везе на посебан начин. Ствар је у томе да нам није потребан прави прелазак по везама. Ми једноставно желимо да Angular прикаже другу компоненту, промени URL у адресној траци прегледача и при томе не освежи страницу.

Због тога ћемо уместо урођеног атрибута href користити Angular-ов атрибут RouterLink.

За то нам га је потребно увезти:

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

Прописати у декоратору:

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

Сада можемо направити наше везе:

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