Спасылкі для роўтынгу в 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>