带有行单击和操作按钮的角度材料表作为单独的操作答案

【问题标题】：angular material table with row click and action buttons as a separate actions带有行单击和操作按钮的角度材料表作为单独的操作
【发布时间】：2021-01-08 06:39:53
【问题描述】：

我正在寻找解决方案来支持行点击和操作作为角度材料表中的单独功能。

我尝试了以下方法：

https://stackblitz.com/edit/angular-minimal-material-table-action-buttons-omoogj

我想实现这个功能：

点击行时，我想导航到不同的详细 URL 页面
在编辑操作上单击我想打开不同的 URL。

问题： 我无法区分行点击与操作项点击，因为两者都在同一行中。

有没有人找到解决方案或有角材料支持这种行为？

当前行为：

【问题讨论】：

标签： angular html-table angular-material

【解决方案1】：

如果我理解正确，您正在寻找的是Event.stopPropagation()。

尝试这样实现：

<a mat-icon-button (click)="$event.stopPropagation()">
  <mat-icon>edit</mat-icon>
</a>

默认情况下，单击事件会在 DOM 树中冒泡并在每一层上触发。

【讨论】：

【解决方案2】：

你必须停止事件的传播。

    <a mat-icon-button (click)="edit($event)">
        <mat-icon>edit</mat-icon>        
      </a>


  edit(e) {
    e.stopPropagation();
    console.log('edit');
  }

【讨论】：