Programmatische navigatie in Angular

Navigeren naar URL's kan niet alleen met behulp van links, maar ook binnen JavaScript-code, met speciale commando's.

Dit wordt gedaan met de service Router. Laten we eens kijken hoe we ermee kunnen werken. Om te beginnen importeren we het:

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

Laten we het nu in de component injecteren met dependency injection:

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

De service heeft een methode navigate, die naar een opgegeven URL navigeert. Laten we deze methode gebruiken:

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

Laten we nu de methode go aanroepen bij een klik op een knop:

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