Angular通知托盘下拉组件如何实现通知文本与删除图标独立点击交互且保留*ngFor循环

之前两个改造方案的问题根源 #

• 第一套双按钮并排方案布局偏移的原因：仅加了外层flex容器，没有给两个平级的mat-button分配明确的宽度规则。mat-button默认是内容自适应宽度的inline元素，两个按钮并排时会全部贴合容器左侧，不会自然实现“左侧文本占满、右侧删除靠最右”的布局效果。
• 第二套单button套内部可点击元素方案的缺陷：本质上违反HTML规范——button元素内部不允许嵌套其他可交互元素，就算加了$event.stopPropagation()拦截冒泡，也会在部分浏览器下出现点击穿透、事件触发顺序错乱的问题，无法从根源上保证两个操作完全独立。

最终可复用的实现代码 #

核心思路是把循环节点、交互节点完全拆分，用无交互的div做单条通知的Flex容器，内部放置两个平级的独立按钮，各自绑定独立的点击逻辑，不依赖冒泡拦截实现交互隔离。

模板结构 #

<ce-dropdown #notificationsDropdown
             className="dropdown-menu dropdown-icon">
  <!-- *ngFor绑定在无交互的div容器上，不要直接绑在按钮元素上 -->
  <div 
    *ngFor="let notification of notifications"
    class="notification-item">
    <!-- 左侧文本区域：独立按钮，绑定标记已读逻辑 -->
    <button 
      mat-button
      (click)="markAsRead(notification)"
      class="notification-content animated-transition-2">
      <strong *ngIf="notification.read === null">
        {{notification.message | translate: getParamsData(notification)}}
      </strong>
      <span *ngIf="notification.read !== null">
        {{notification.message | translate: getParamsData(notification)}}
      </span>
    </button>
    <!-- 右侧删除区域：独立按钮，绑定删除逻辑，和左侧按钮平级 -->
    <button 
      mat-button
      *ngIf="!isEmptyTray()"
      (click)="deleteNotification(notification)"
      class="notification-delete animated-transition-2">
      <mat-icon class="mdi mdi-delete-forever"></mat-icon>
    </button>
  </div>
</ce-dropdown>

配套样式（解决之前布局偏移的问题） #

// 单条通知的外层容器
.notification-item {
  display: flex;
  align-items: center;
  width: 100%;
  // 按需调整上下内边距，匹配原来的按钮尺寸
  padding: 2px 4px;
}

// 左侧文本按钮：占满除删除按钮外的所有剩余宽度
.notification-content {
  flex: 1;
  width: 100%;
  text-align: left;
  line-height: 1.4;
  // 覆盖mat-button默认的内边距，匹配原来的点击热区
  padding: 8px 12px;
}

// 右侧删除按钮：固定宽度，不拉伸
.notification-delete {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  line-height: 1;
}

方案的实际效果 #

• 交互完全独立：*这种结构下完全不需要额外写stopPropagation兜底，因为所有可点击元素都是平级的，不存在嵌套的交互层级，点击删除按钮只会触发删除逻辑，根本不会出现冒泡触发标记已读的问题。
• 布局完全匹配预期：左侧文本区域占满可用宽度，未读加粗、已读常规字重的视觉逻辑完全保留，删除图标固定在通知项最右侧，和最初的设计效果一致。
• 结构符合HTML规范：没有嵌套可交互元素的违规结构，不会出现浏览器兼容性问题。

注意：之前把*ngFor直接绑定在button元素上的写法会限制后续结构调整的灵活度，把循环绑在无交互的div容器上，后续要加通知已读状态标识、时间戳这类附加内容时，不需要修改按钮的交互逻辑，改动成本更低。

内容的提问来源于stack exchange，提问作者Dairelys García Rivas