Врски за рутирање во 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>