以角度将ID传递给子组件答案

【问题标题】：Passing an ID to a child component in angular以角度将ID传递给子组件
【发布时间】：2021-12-22 10:27:16
【问题描述】：

我有三个组件

一个列表组件，它请求接收一个对象，然后是一个卡片组件，它为从列表组件传递到数组的每个对象迭代，最后，我有一个 Detail 组件，我试图传递一个 ID，它是存在于从 List 组件传递到 Card 组件的对象中。

我不知道如何传递这个id。

列表组件

this.webService.getObjects().subscribe((res : any) =>  {
      console.log(res) 
      this.cards = res.results  <-- An Array
      console.log(res.results)
      
    })

列表模板：

<app-card class="col-md-4" *ngFor="let card of cards"
    [card]={card}></app-card> <-- object passed to Card Component

卡片组件：

@Input() 
  game : any

卡片模板：

 <a href="javascript: void" [routerLink]="['',card.card.name]" class="btn btn-primary align-items-center">Detail</a>

如何将一个对象内部的 ID 从列表组件传递到卡片组件？

【问题讨论】：

标签： angular data-binding components

【解决方案1】：

我认为您在卡片输入参数中传递了 id，因此您可以使用 (?) 在 html 中访问该卡片数据，以避免尝试访问无效引用。

 <a href="javascript: void" [routerLink]="['',card?.id]"   class="btn btn-primary align-items-center">Detail</a>

【讨论】：