Linki do routingu w Angularze
W poprzednich lekcjach wpisywaliśmy URL ręcznie w pasek adresu. Stwórzmy teraz linki, których kliknięcie będzie wyświetlać różne komponenty.
Aby to zrobić, będziemy tworzyć linki w specjalny sposób. Chodzi o to, że nie potrzebujemy prawdziwego przejścia przez linki. Po prostu chcemy, aby Angular pokazał inny komponent, zmienił URL w pasku adresu przeglądarki i przy tym nie odświeżył strony.
Dlatego zamiast natywnego atrybutu href
będziemy używać atrybutu Angulara
RouterLink.
Aby to zrobić, musimy go zaimportować:
import { RouterLink } from '@angular/router';
Zadeklarować w dekoratorze:
@Component({
......
imports: [RouterOutlet, RouterLink],
......
})
Teraz możemy stworzyć nasze linki:
<nav>
<a routerLink="/aaaa/">
Aaaa
</a>
<a routerLink="/bbbb/">
Bbbb
</a>
</nav>
Stwórz linki przełączające twoje komponenty.
