Az útvonalparaméterek értékeinek elérése a komponensben Angularban

Az útvonalakban definiált paraméterek értékeit a komponens osztályában is el lehet érni. Nézzük meg, hogyan tehetjük ezt meg. Tegyük fel, hogy a következő, paraméterekkel rendelkező útvonalunk van:

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

Most kérjük le ennek a paraméternek az értékét a komponens osztályában. Itt fontos megjegyezni, hogy az útvonalparaméterek értékeit csak abból a komponensből lehet elérni, amelyik hozzá van rendelve az útvonalhoz. Esetünkben az útvonalhoz a Aaaa komponens van rendelve. Ezért ezen fogunk dolgozni tovább.

Tehát az útvonalparaméterek értékeinek eléréséhez az ActivatedRoute szolgáltatást kell használni. Importáljuk ezt a komponensünkbe:

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

Ezt a konstruktorba kell injektálni:

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

Kérjük le a paraméterekkel rendelkező objektumot:

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

Kérjük le a paraméterünk értékét:

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