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