Reittiparametrien arvot komponentissa Angularissa

Parametrien arvot, jotka määrittelemme reiteissä, voidaan saada komponentin luokassa. Katsotaan kuinka tämä voidaan tehdä. Oletetaan, että meillä on seuraava reitti parametreineen:

app/app.routes.tsconst routes: Routes = [
  { path: 'aaaa/:id', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

Saadaan tämän parametrin arvo komponentin luokassa. Tässä on huomioitava, että reittiparametrien arvot voidaan saada vain komponentista, joka on liitetty reittiin. Meidän tapauksessamme reittiin on liitetty Aaaa -komponentti. Siksi työskentelemme jatkossa sen kanssa.

Joten, reittiparametrien arvojen saamiseksi täytyy käyttää palvelua ActivatedRoute. Tuodaan se komponenttiimme:

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

Injectoidaan palvelu konstruktoriin:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    
  }
}

Saadaan objekti parametreineen:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    console.log(params);
  }
}

Saadaan parametrimme arvo:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    let id = params['id'];
    console.log(id);
  }
}