Valorile parametrilor rutei în componentă în Angular

Valorile parametrilor pe care le definim în rute pot fi obținute în clasa componentei. Să vedem cum se poate face acest lucru. Să presupunem că avem următoarea rută cu parametri:

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

Să obținem valoarea acestui parametru în clasa componentei. Aici trebuie să acordăm atenție faptului că valorile parametrilor rutei pot fi obținute doar în acea componentă care este legată de rută. În cazul nostru, de rută este legată componenta Aaaa. De aceea, vom continua să lucrăm cu ea.

Deci, pentru a obține valorile parametrilor rutei trebuie să folosim serviciul ActivatedRoute. Să îl importăm în componenta noastră:

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

Să injectăm serviciul în constructor:

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

Să obținem obiectul cu parametrii:

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

Să obținem valoarea parametrului nostru:

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