Линкове за рутиране в 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>

Направете линкове, които превключват вашите компоненти.