Hodnoty parametrov trás v komponente v Angular

Hodnoty parametrov, ktoré definujeme v trasách, je možné získať v triede komponentu. Pozrime sa, ako to možno urobiť. Nech máme nasledujúcu trasu s parametrami:

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

Získajme hodnotu tohto parametra v triede komponentu. Tu je potrebné venovať pozornosť skutočnosti, že hodnoty parametrov trasy je možné získať len v tom komponente, ktorý je priradený k trase. V našom prípade je k trase priradený Aaaa komponent. Preto s ním budeme ďalej pracovať.

Takže, na získanie hodnôt parametrov trasy je potrebné použiť servis ActivatedRoute. Importujme ho do nášho komponentu:

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

Vložme servis do konštruktora:

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

Získajme objekt s parametrami:

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

Získajme hodnotu nášho parametra:

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