Ohjelmallinen navigointi Angularissa

URL-osoitteisiin voi siirtyä paitsi linkkien avulla, myös JavaScript-koodin sisällä erikoiskomennoilla.

Tämä tehdään Router-palvelun avulla. Katsotaan, kuinka sen kanssa työskennellään. Aluksi tuodaan se sisään:

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

Nyt injektoidaan se komponenttiin riippuvuuden injektoinnin avulla:

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

Palvelulla on metodi navigate, joka siirtyy annettuun URL-osoitteeseen. Käytetään tätä metodia:

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

Ja nyt kutsutaan metodia go painikkeen klikkauksen yhteydessä:

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