Ссылки для роутинга в Angular

В предыдущих уроках мы вбивали URL в адресную строку вручную. Давайте теперь сделаем ссылки, переход по которым будет показывать различные компоненты.

Для этого мы будем делать ссылки особым образом. Дело в том, что нам не нужен настоящий переход по ссылкам. Мы просто хотим, чтобы Angular показал другой компонент, изменил URL в адресной строке браузера и при этом не обновлял страницу.

Поэтому вместо родного атрибута href мы будем использовать ангуларовский атрибут RouterLink.

Для этого нам нужно его импортировать:

import { RouterLink } from '@angular/router';

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

@Component({ ...... imports: [RouterOutlet, RouterLink], ...... })

Теперь мы можем сделать наши ссылки:

<nav> <a routerLink="/aaaa/"> Aaaa </a> <a routerLink="/bbbb/"> Bbbb </a> </nav>

Сделайте ссылки, переключающие ваши компоненты.