Programmatisk navigation i Angular

At navigere efter URL'er kan ikke kun gøres med links, men også inde i JavaScript-koden, ved hjælp af specielle kommandoer.

Dette gøres ved hjælp af servicen Router. Lad os se på, hvordan man arbejder med den. Til at starte med, importerer vi den:

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

Nu injicerer vi den i komponenten ved hjælp af afhængighedsinjektion:

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

Servicen har metoden navigate, som navigerer til en given URL. Lad os bruge denne metode:

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

Og nu kalder vi metoden go ved et klik på en knap:

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