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

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