Angular中如何将event及pick值等多数据从子组件传递给父组件

你的实现思路完全是正确的，父子组件通信用@Output + EventEmitter是Angular官方推荐的标准方案，只需要调整几处代码就能实现同时传递event和pick的需求：

1. 修改子组件 event.component.html 点击事件，传递当前选中的pick #

原来的click事件只传了event对象，现在要把当前循环到的pick也作为参数传入：

<p class="pick" *ngFor="let pick of market.picks" (click)="onQuotaClick(event, pick)" >
  {{ market.marketId == 1 ? pick.odds : ''}}
</p>

2. 修改子组件 event.component.ts 的事件触发逻辑，同时抛出event和pick #

调整参数接收，把两个值包装成对象抛出给父组件：

onQuotaClick(event: any, pick: any) {
  this.onAddToTicket.emit({
    event: event,
    pick: pick
  });
}

3. 修改父组件 events.component.html 的事件监听，正确接收子组件抛出的值 #

注意子组件抛出的所有值都需要用内置变量$event接收，不能直接写父组件循环里的event变量：

<app-event *ngFor="let event of eventsByDay.events"
  [event]="event"
  [eventsByDay]="eventsByDay"
  (onAddToTicket)="addToTicket($event)"
></app-event>

4. 修改父组件 events.component.ts 的处理方法，把值传给service #

现在接收到的参数已经包含了event和pick两个值，直接传给TicketService即可：

addToTicket(ticketData: {event: any, pick: any}) {
  // 可根据你service的入参要求调整，支持直接传整个对象或者拆分传参
  this.ticketService.addToTicket(ticketData);
}

额外优化建议 #

尽量避免使用any类型，可以给event、pick定义对应的TS接口，既保证类型安全也方便后续维护。

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