如何更新Angular 4中mat-icon组件的(click)触发方法？

我太懂你这个痛点了——改mat-icon的图标内容用innerHTML分分钟搞定，但要动态替换它的点击触发方法，确实不像改HTML内容那么直观。刚好我之前做项目时也遇到过几乎一模一样的场景，给你分享下亲测可行的实现思路：

核心逻辑是不要直接去修改(click)绑定的方法本身，而是通过一个中间代理方法来承接点击事件，再根据当前状态（比如是否已收藏）去调用对应的实际处理函数。这样我们只需要切换状态，就能间接实现“更新点击事件”的效果，完美匹配你提到的setFavorite、unsetFavorite方法需求。

具体实现代码 #

组件类逻辑

// 用这个变量标记当前是否处于已收藏状态，同时存储收藏ID
favoriteID: number | null = null;

// 把这个方法绑定到mat-icon的(click)上，作为中间代理
handleIconClick() {
  if (this.favoriteID) {
    // 当前是已收藏状态，点击就触发取消收藏
    this.unsetFavorite();
  } else {
    // 当前是未收藏状态，点击先执行收藏逻辑
    this.setFavorite().then(id => {
      this.favoriteID = id;
      // 收藏完成后，再调用你提到的changeClickFunction方法
      this.changeClickFunction();
    });
  }
}

// 你的收藏方法，按需求返回收藏ID
setFavorite(): Promise<number> {
  // 这里替换成你实际的收藏业务逻辑，比如调用后端API
  return new Promise(resolve => {
    // 模拟API返回收藏ID的过程
    setTimeout(() => resolve(1001), 400);
  });
}

// 你的取消收藏方法，负责重置状态
unsetFavorite() {
  // 这里替换成你实际的取消收藏逻辑
  this.favoriteID = null;
}

// 你提到的后续处理方法
changeClickFunction() {
  console.log('收藏成功后执行的额外逻辑');
}

模板绑定

<mat-icon (click)="handleIconClick()">
  <!-- 顺便用状态变量动态切换图标，省得单独用innerHTML啦 -->
  {{ favoriteID ? 'favorite' : 'favorite_border' }}
</mat-icon>

逻辑说明 #

• 我们把mat-icon的(click)固定绑定到handleIconClick这个代理方法上，不用再去动态修改绑定关系
• 通过favoriteID这个状态变量判断当前该触发哪个业务方法：有值时触发取消收藏，无值时触发收藏
• setFavorite返回收藏ID后，更新favoriteID状态，这样下次点击就会自动切换到取消收藏的逻辑，同时按需求调用changeClickFunction
• 图标内容也可以通过状态变量直接切换，要是你需要更复杂的HTML内容，用innerHTML也完全不冲突

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