Angular中TS传递字符串作为(click)处理器失效，求问题排查

核心问题 #

你在TS代码里给handler赋值的是字符串形式的函数调用语句（比如'homeHandler()'），但Angular的(click)事件绑定需要的是可执行的函数引用或表达式，字符串本身不会被当作函数执行，所以点击时毫无反应。

修复步骤 #

1. 修改TS文件，传入函数引用 #

把menuItems里的handler值改成直接引用函数，去掉引号和括号，同时用bind(this)保证函数执行时的this指向组件实例：

constructor(){
    this.menuItems = [
      {label: 'HOME', handler: this.homeHandler.bind(this)},
      {label: 'VIEW', handler: this.viewHandler.bind(this)}
    ]
  }

  homeHandler() {
    console.log('homeHandler called');
  }

  viewHandler() {
    console.log('viewHandler called');
  }

2. 调整HTML的事件绑定 #

现在item.handler是函数引用，需要在(click)里主动调用这个函数：

<ul>
  <li *ngFor="let item of menuItems" (click)="item.handler()">
    <div>{{item.label}}</div> 
  </li>
</ul>

更简洁的替代写法 #

如果不想用bind(this)，可以直接用箭头函数，箭头函数会自动捕获当前组件的上下文this：

constructor(){
    this.menuItems = [
      {label: 'HOME', handler: () => this.homeHandler()},
      {label: 'VIEW', handler: () => this.viewHandler()}
    ]
  }

HTML部分保持(click)="item.handler()"即可。

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