Programmatisk navigering i Angular

Att navigera till URL:er kan göras inte bara med länkar, utan också inuti JavaScript-kod, med hjälp av speciella kommandon.

Detta görs med hjälp av tjänsten Router. Låt oss titta på hur man arbetar med den. Först importerar vi den:

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

Låt oss nu injicera den i komponenten med hjälp av beroendeinjektion:

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

Tjänsten har metoden navigate, som navigerar till en given URL. Låt oss använda den här metoden:

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

Låt oss nu anropa metoden go vid klick på en knapp:

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