Angular中如何向自定义组件传递click事件绑定的执行函数？

你原本计划通过属性传递函数名字符串的方案不可行，Angular 模板编译阶段会将模板内的方法绑定限定在当前组件实例作用域，传入的字符串无法自动匹配父组件的方法，还会带来作用域、类型校验的一系列问题，推荐用Angular原生的@Output事件机制实现，步骤如下：

1. 改造Component1组件 #

首先修改组件类，引入事件相关装饰器，定义对外暴露的点击事件，同时修改模板内部的点击绑定：

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

@Component({
  selector: 'component1',
  template: `
<a [routerLink]="linkTo" class="nav-link" (click)="onInnerClick($event)">
    <span class="sidebar-icon">
      <ng-content></ng-content>
    </span>
    <span class="sidebar-text">{{text}}</span>
</a>
  `
})
export class Component1 {
  @Input() text: string = '';
  @Input() linkTo: string | any[] = '';
  // 对外暴露的点击事件，和原生click事件一样可以传递事件对象
  @Output() navClick = new EventEmitter<Event>();

  onInnerClick(event: Event) {
    // 触发对外事件，将原生事件对象传递给父组件
    this.navClick.emit(event);
  }
}

2. 业务组件中使用 #

不需要传functionName属性，直接用Angular标准的事件绑定语法即可，和绑定原生DOM事件的写法完全一致：

<component1 text="Logout" linkTo="/logout" (navClick)="logout($event)"></component1>

上面代码里的logout就是你业务组件里原本要绑定的点击执行函数，$event是原生点击事件对象，按需接收即可。

特殊场景备选方案 #

如果你确实需要动态传入不同的函数逻辑而非固定事件名，可以用@Input传递函数引用，但这种方式变更检测开销更高，非必要不推荐：

• Component1类新增输入属性：@Input() customClick: (e: Event) => void;
• Component1模板修改点击绑定：(click)="customClick?.($event)"
• 父组件传参时注意绑定箭头函数保证this指向：

  // 父组件类中定义
  logout = (e: Event) => {
    // 登出逻辑
  }
  

  <!-- 父组件模板 -->
  <component1 text="Logout" [customClick]="logout"></component1>
  

注意：绝对不要通过传递函数名字符串再动态取方法的方式实现，这种方式绕开了Angular的模板类型检查、作用域管理，后期维护极容易出bug。

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