Angular中如何通过EventEmitter实现子组件向父组件传字符串值

你必须在父组件模板中渲染子组件，并绑定子组件通过@Output()定义的自定义事件，才能完成事件关联和值传递，当前父组件模板为空无法实现需求，按以下步骤修改即可：

1. 修改父组件模板配置 #

替换父组件原先的空模板，引入子组件标签，通过Angular事件绑定语法监听子组件的message输出事件，绑定语法中$event代表子组件emit传递的载荷值：

@Component({
  selector: 'parent-component',
  template: `
    <!-- 引入子组件，绑定message输出事件 -->
    <child-component (message)="handleChildMessage($event)"></child-component>
  `,
  styleUrls: ['./parent.component.css']
})

2. 父组件类添加事件处理逻辑 #

在父组件类中新增事件处理方法，接收子组件传递的对象，拆解出两个字符串参数后传入你已有的printMessages函数，子组件触发emit时会自动执行该处理流程：

export class ParentComponent {
  constructor() { }

  // 新增：子组件事件处理方法
  handleChildMessage(payload: { string1: string, string2: string }) {
    // 拆解参数传入目标函数
    this.printMessages(payload.string1, payload.string2);
  }

  printMessages(string1: string, string2: string) { 
    console.log(string1, string2);
  }
}

可选规范优化 #

可以给子组件的EventEmitter添加泛型类型定义，提前约束传值格式，避免类型错误：

// 子组件中修改@Output定义
@Output() message = new EventEmitter<{ string1: string, string2: string }>();

修改完成后，点击子组件的「Send Strings」按钮，就会自动触发父组件方法，控制台会正确打印Hello World!。

内容的提问来源于stack exchange，提问作者gadget-man615