Programmgesteuerte Navigation in Angular

Das Navigieren zu URLs ist nicht nur mit Hilfe von Links möglich, sondern auch innerhalb von JavaScript-Code, mit speziellen Befehlen.

Dies geschieht mit dem Service Router. Lassen Sie uns einen Blick darauf werfen, wie man mit ihm arbeitet. Zuerst importieren wir ihn:

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

Jetzt injizieren wir ihn in die Komponente mittels Dependency Injection:

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

Der Service hat eine Methode navigate, die zu einer bestimmten URL navigiert. Verwenden wir diese Methode:

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

Und jetzt rufen wir die Methode go bei einem Klick auf einen Button auf:

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