Angular路由参数ID无法获取求助：foodID始终为undefined

核心问题1：路由配置格式错误 #

你的路由配置里参数名被错误包裹在大括号中，Angular路由参数的正确格式是:参数名，不需要额外的大括号。

修正后的路由配置：

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

核心问题2：跳转方式不符合Angular规范 #

使用原生<a>标签的href跳转会触发整页刷新，破坏Angular单页应用的路由机制，可能导致参数传递异常。正确做法是使用Angular内置的routerLink指令。

修正后的跳转标签：

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

正确获取路由参数的方式 #

除了修正上述问题，你可以继续使用原有的订阅方式，也可以采用Angular推荐的paramMapAPI（更严谨，支持类型转换）：

方式1：订阅params（兼容旧版本）

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

方式2：订阅paramMap（Angular官方推荐）

import { ActivatedRoute } from '@angular/router';

// 注入ActivatedRoute
constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  this.route.paramMap.subscribe(paramMap => {
    this.foodID = paramMap.get('Id');
    // 如果需要数字类型，可转换：this.foodID = +paramMap.get('Id');
  });
}

方式3：使用snapshot（参数仅需获取一次时）

如果组件初始化后参数不会变化，可以直接用快照获取，无需订阅：

this.foodID = this.route.snapshot.paramMap.get('Id');

内容的提问来源于stack exchange，提问作者Михайло Куриця