Линкове за рутиране в Angular

В предишните уроци ние въвеждахме URL ръчно в адресната лента. Нека сега направим линкове, при кликването на които ще се показват различни компоненти.

За целта ще правим линкове по специален начин. Работата е там, че не ни трябва истинско преминаване по линкове. Ние просто искаме Angular да покаже друг компонент, да промени URL в адресната лента на браузъра и при това да не опреснява страницата.

Затова вместо родния атрибут href ние ще използваме ангуларския атрибут 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>