Angular开发：如何将List组件对象内的ID传递到Card及Detail子组件

先明确现有代码存在的问题：

• List 模板的属性绑定语法错误，[card]={card} 不符合 Angular 绑定规范，且和 Card 组件声明的输入属性不匹配
• Card 组件声明的输入属性名为 game，但 List 组件传递时用的属性名是 card，二者无法对应
• Card 模板的路由链接引用了不存在的变量层级 card.card

步骤1：修正组件输入属性匹配 #

统一输入属性命名，将Card组件的输入属性改为和传递的属性名一致即可：

// Card Component 代码
@Input() 
card: any; // 把原来的game改为card，和List传递的属性名对应

对应修正List模板的绑定语法：

<!-- List Template 代码 -->
<app-card class="col-md-4" *ngFor="let card of cards"
    [card]="card"></app-card>

步骤2：配置带ID参数的Detail路由 #

在Angular路由配置文件（通常为app-routing.module.ts）中，给Detail组件添加带ID参数的路由规则：

const routes: Routes = [
  // 其他现有路由
  {
    path: 'detail/:id', // :id 为ID参数的占位符
    component: DetailComponent
  }
]

步骤3：修改Card跳转链接，携带ID #

假设接口返回的对象中ID字段名为id，修改Card的跳转链接如下：

<!-- Card Template 代码 -->
<a [routerLink]="['/detail', card.id]" class="btn btn-primary align-items-center">Detail</a>

不需要额外添加href="javascript: void"，Angular的routerLink会自动处理默认跳转行为。

步骤4：在Detail组件中接收ID #

在Detail组件中注入ActivatedRoute获取路由携带的ID参数：

// Detail Component 代码
import { ActivatedRoute } from '@angular/router';

export class DetailComponent implements OnInit {
  id: string | number;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 方式1：取快照参数，适合进入页面后ID不会变化的场景
    this.id = this.route.snapshot.paramMap.get('id');
    // 方式2：订阅参数，适合同一个组件路由参数会动态更新的场景
    // this.route.paramMap.subscribe(params => {
    //   this.id = params.get('id');
    //   // 拿到ID后即可发起请求获取对应详情数据
    // })
  }
}

如果ID为数字类型，自行用Number()转换参数格式即可。

内容的提问来源于stack exchange，提问作者TFast