Hivatkozások az útválasztáshoz Angularban

Az előző leckékben manuálisan írtuk be az URL-t a cím-sorba. Most készítsünk hivatkozásokat, amelyekre kattintva különböző komponensek jelennek meg.

Ehhez különleges módon készítjük el a hivatkozásokat. A helyzet az, hogy nincs szükségünk valódi linkre kattintásra. Csak azt szeretnénk, hogy az Angular megjelenítsen egy másik komponenst, megváltoztassa az URL-t a böngésző cím-sorában, és közben ne frissítse az oldalt.

Ezért a natív href attribútum helyett az Angularos RouterLink attribútumot fogjuk használni.

Ehhez importálnunk kell:

app/app.component.tsimport { RouterLink } from '@angular/router';

Be kell írnunk a dekorátorba:

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink],
  ......
})

Most már elkészíthetjük a hivatkozásainkat:

app/app.component.html<nav>
  <a routerLink="/aaaa/">
    Aaaa
  </a>
  <a routerLink="/bbbb/">
    Bbbb
  </a>
</nav>