Odkazy pro routování v Angular

V předchozích lekcích jsme zadávali URL do adresního řádku ručně. Pojďme nyní vytvořit odkazy, jejichž klikáním se zobrazí různé komponenty.

K tomu budeme vytvářet odkazy zvláštním způsobem. Jde o to, že nepotřebujeme skutečný přechod po odkazech. Chceme pouze, aby Angular zobrazil jiný komponent, změnil URL v adresním řádku prohlížeče a přitom neobnovil stránku.

Proto místo nativního atributu href budeme používat angularovský atribut RouterLink.

Abychom to udělali, musíme jej importovat:

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

Napsat v dekorátoru:

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

Nyní můžeme vytvořit naše odkazy:

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