Programmatisk navigasjon i Angular

Å navigere via URL-er kan gjøres ikke bare med lenker, men også inni JavaScript-kode, ved hjelp av spesielle kommandoer.

Dette gjøres ved hjelp av tjenesten Router. La oss se på hvordan man arbeider med den. Til å begynne med, importerer vi den:

app/app.component.tsimport { Router } from "@angular/router";

La oss nå injisere den inn i komponenten ved hjelp av avhengighetsinjisering:

app/app.component.tsexport class AppComponent {
  constructor(private router: Router) {
  
  }
}

Tjenesten har metoden navigate, som navigerer til en spesifisert URL. La oss bruke denne metoden:

app/app.component.tsexport class AppComponent {
  constructor(private router: Router) {
  
  }
  
  go() {
    this.router.navigate(['/aaaa/']);
  }
}

La oss nå kalle metoden go ved et klikk på en knapp:

app/app.component.html<button (click)="go()">btn</button>