Question

我有这种类型的<代码>和t;a>。

<a class="card_img"  [href]=" /Detail/  + food.id">

路线如下:

  {
    path: "Detail/:{Id}",
    component: DetailInfoComponent
  }

<>So>,问题: 我可以使用这种方法。

this.route.params.subscribe(params => {
     this.foodID = params[ Id ];
   });

http://www.ohchr.org。 <>?

Answer 1

{
    path: "Detail/:Id",
    component: DetailInfoComponent
}

道路必须没有“{}”

Answer 2

你们可以借助天线或可观察的线索从路上获得红.。我更喜欢观测站,因为URL有时会从方案上改变,如果模板/概览也更新,则会ice。

Your routing file must look like this (without the curly braces):

 {
    path: "Detail/:Id",
    component: DetailInfoComponent
 }

Since you want to wait for data bindings to be ready, you can access it in the ngOnInit lifecycle hook.


  // On top of your Class - For unsubscribing from observables automatically - Injection context
  private destroyRef = inject(DestroyRef);

  ngOnInit() {
    this.route.params.pipe(
      takeUntilDestroyed(this.destroyRef)
    ).subscribe(params => {
     console.log(params);
     this.foodID = params[ Id ];
   });

  }

Also added a console.log to make sure you re getting the value, and nothing else is going on with async operations.

为了让它使用一张头盔,你可以做(确保你用你预期的那套指数取代0):

const foodID = this.route.snapshot.url[0]!.path;

牢记每个平台上的档案名称和文件夹都对案件敏感。个人只使用较低等级的申请人,但这可能是个人的偏好。

此外,使用[航道]而不是使用[红外线]来适当使用安热线航道。例如。

<a class="card_img" [routerLink]="[ /Detail/ , food.id]">

这一轮船推进并播下了预期的导航线。确保在进口时将路线摩杜勒包括在内。 [routerLink] exxpects or a string, or a range of path elements.

友情链接