Angular子组件触发移除事件时如何向父组件传递参数值

功能失效是两个写法错误导致的：

• 父组件模板事件传参不对：绑定removed事件时传入的fruit是父组件作用域里根本不存在的变量，拿不到子组件传出的移除值
• 子组件没配置输出事件：chips-autocomplete-example组件没有声明removed对应的事件发射器，点删除按钮时根本没把被删的水果值往外传

子组件改造 #

先在子组件ts文件顶部引入需要的依赖：

import { Component, Output, EventEmitter } from '@angular/core';

在组件类里声明输出事件：

@Output() removed = new EventEmitter<string>();

找到子组件里写的移除水果的方法，在删除逻辑执行完成后，把被删掉的水果值发射给父组件：

remove(fruit: string): void {
  const index = this.fruits.indexOf(fruit);
  if (index >= 0) {
    this.fruits.splice(index, 1);
    // 发射被移除的水果值
    this.removed.emit(fruit);
  }
}

父组件模板修正 #

把app.component.html里的子组件事件绑定改对，用Angular内置的$event接收子组件传出来的值，替换掉原来无效的fruit参数：

<chips-autocomplete-example
  (removed)="removeClick($event)"
></chips-autocomplete-example>

父组件里写好的removeClick方法逻辑是对的，不用改。改完之后点任意水果的关闭X按钮，就能正常弹出对应水果的名称了。

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