Ссылки для роутинга в 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>
Сделайте ссылки, переключающие ваши компоненты.