Giá trị tham số định tuyến trong component trong Angular

Giá trị tham số mà chúng ta xác định trong các route có thể được lấy trong class component. Hãy xem cách chúng ta có thể làm điều đó. Giả sử chúng ta có route sau với các tham số:

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

Hãy lấy giá trị của tham số này trong class component. Ở đây cần lưu ý rằng giá trị tham số định tuyến chỉ có thể được lấy trong component được liên kết với route. Trong trường hợp của chúng ta, route được liên kết với component Aaaa. Do đó, chúng ta sẽ làm việc tiếp với nó.

Vậy, để lấy giá trị tham số định tuyến, cần sử dụng service ActivatedRoute. Hãy import nó vào component của chúng ta:

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

Hãy inject service vào constructor:

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

  }
}

Hãy lấy object chứa các tham số:

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

Hãy lấy giá trị tham số của chúng ta:

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