Angular中onclick绑定变量值的正确实现方法咨询

• Angular不支持直接在原生onclick属性里用{{}}插值绑定方法，得用框架自带的事件绑定语法：
  如果team.p_slot_01是组件里定义的方法，直接这么写：

  <button id="btn" (click)="team.p_slot_01()">App</button>
  

• 必须保证team.p_slot_01是组件类里能调用的方法，比如在组件的.ts文件里定义：

  team = {
    p_slot_01: () => {
      // 这里写点击按钮后要执行的代码
      console.log('按钮触发了');
    }
  };
  

• 如果team.p_slot_01是字符串类型的方法名（比如从后端获取的），得通过组件里的方法间接调用：
  先在.ts里加个执行方法：

  executeMethod(methodName: string) {
    const method = this.team[methodName];
    if (method && typeof method === 'function') {
      method();
    }
  }
  

  模板里改成：

  <button id="btn" (click)="executeMethod(team.p_slot_01)">App</button>
  

• 记住别混用原生DOM事件和Angular绑定，用(click)才符合框架的变更检测逻辑，不容易出问题。

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