如何仅为Angular Material Badge添加onClick点击事件？

要实现只有徽章（Badge）触发点击事件，而文本区域不触发，你可以通过事件委托+目标元素判断来实现，具体步骤如下：

• 第一步：在模板的click事件中传入$event对象，用来获取点击的目标元素
• 第二步：在组件的点击方法里，判断点击的元素是否是Angular Material生成的徽章元素（类名为mat-badge-content），只有符合条件时才执行业务逻辑

模板代码修改： #

<div matBadge="i" matBadgeOverlap="false" (click)="onClick($event)">Text with badge</div>

组件逻辑代码： #

onClick(event: MouseEvent) {
  const clickedElement = event.target as HTMLElement;
  // 检查点击的元素是否是徽章本身
  if (clickedElement.classList.contains('mat-badge-content')) {
    // 这里写你需要执行的徽章点击逻辑
    console.log('只有徽章被点击时才会执行这里');
  }
}

这种方法精准锁定了徽章元素，确保只有点击徽章区域才会触发你的业务逻辑，不会误触发文本区域的点击。

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