Werte der Routenparameter in der Komponente in Angular

Die Werte der Parameter, die wir in den Routen definieren, können in der Komponentenklasse abgerufen werden. Schauen wir uns an, wie das gemacht werden kann. Nehmen wir an, wir haben die folgende Route mit Parametern:

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

Lassen Sie uns den Wert dieses Parameters in der Komponentenklasse abrufen. Hier ist zu beachten, dass die Werte der Routenparameter nur in der Komponente abgerufen werden können, die an die Route gebunden ist. In unserem Fall ist die Aaaa Komponente an die Route gebunden. Daher werden wir im Folgenden mit ihr arbeiten.

Um die Werte der Routenparameter zu erhalten, muss der Service ActivatedRoute verwendet werden. Importieren wir ihn in unsere Komponente:

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

Fügen wir den Service im Konstruktor ein:

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

Holen wir uns das Objekt mit den Parametern:

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

Holen wir uns den Wert unseres Parameters:

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