Angular中子组件向父组件传递参数调用函数的问题解决

这个问题我之前也碰到过，核心是没捋清楚Angular事件绑定里参数传递的逻辑，原来的写法是父组件主动把自己的offense变量传给方法，现在要改成接收子组件emit过来的参数，只需要做以下几处调整：

1. 子组件保持emit参数的逻辑不变 #

你的子组件代码其实已经写对了，emit的时候带上参数就行，这里可以直接传原对象或者做浅拷贝（避免后续父组件修改影响子组件）：

// ChildComponent.ts
reset() {
  // 浅拷贝对象，防止引用类型的双向修改
  this.onReset.emit({ ...this.offense });
  // 如果不需要拷贝，直接传this.offense也可以
  // this.onReset.emit(this.offense);
}

2. 修改父组件模板的事件绑定 #

原来的写法是父组件自己传入循环里的offense，现在要接收子组件emit的参数，Angular中事件绑定的默认参数是$event，把模板里的调用改成：

<!-- ParentComponent.html -->
<ion-list>
  <swipable-offense-card 
    *ngFor="let offense of filteredOffenses" 
    [offense]="offense" 
    (onReset)="reset($event)" 
  >
  </swipable-offense-card>
</ion-list>

3. 父组件的reset方法保持参数定义即可 #

你的父组件reset方法的参数本来就是offense，不需要额外修改，只要确保参数类型和子组件emit的类型一致（比如都是Offense类型）：

// ParentComponent.ts
reset(offense: Offense) { 
  return this.http.post(...); 
}

为什么原来的写法能生效？ #

原来的(onReset)="reset(offense)"是父组件主动将自己作用域内的offense变量传入方法，和子组件emit的内容无关；而现在子组件主动传参，父组件必须通过$event来获取这个从子组件传递过来的值，这才是Angular组件间通过@Output传参的标准逻辑。

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