Nawigacja programowa w Angular

Przechodzenie po adresach URL możliwe jest nie tylko za pomocą linków, ale także wewnątrz kodu JavaScript, za pomocą specjalnych komend.

Robimy to za pomocą serwisu Router. Spójrzmy, jak z nim pracować. Na początek zaimportujmy go:

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

Teraz wstrzyknijmy go do komponentu za pomocą iniekcji zależności:

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

Serwis ma metodę navigate, która przechodzi pod podany URL. Użyjmy tej metody:

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

A teraz wywołajmy metodę go po naciśnięciu przycisku:

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