Angular 如何避免在表头内单击触发对整个表头的单击

我有以下允许排序和编辑的表格标题（列）

当点击表格标题时，排序会改变，所以我添加了这个

(click) = "changeToNextSortOption(header)"

(click)="editColumn(header.id, i, $event)"

但是还有一个功能，单击表标题名称来编辑它，为此我添加了这个

(click) = "changeToNextSortOption(header)"

(click)="editColumn(header.id, i, $event)"

但是，当触发列标题上的单击时，表标题上的单击事件也会触发

我需要确保，如果点击标题名称被触发，另一个不会被触发（因为它会改变表格顺序），请告诉我如何操作。

下面是组件HTML部分

<th
  [ngClass]="{ disabledTable: mutipleSelect }"
  *ngFor="let header of table.headers; let i = index"
  id="header{{ header.id }}"
  class="type{{ header.type }} ic-dgd handle"
  (mouseenter)="drgIcon = i; showDrgIcon = !showDrgIcon"
  (mouseleave)="drgIcon = -1; showDrgIcon = !showDrgIcon"
  [attr.data-id]="header.id"
  (click) = "changeToNextSortOption(header)"
>
  <i
    *ngIf="this.drgIcon == i && !creating && showDrgIcon == true"
    class="icon-collapseIn-Copy float-left"
  ></i>
  <i *ngIf="isSortDescending(header)" class="material-icons"
    >keyboard_arrow_down</i
  >
  <i *ngIf="isSortNone(header)" class="material-icons">remove</i>
  <i *ngIf="isSortAscending(header)" class="material-icons"
    >keyboard_arrow_up</i
  >
  <span
    (click)="editColumn(header.id, i, $event)"
    title="{{ header.title }}"
    >{{ header.title
    }}<i *ngIf="canEditTable" class="icon-edit-nocircle"></i
  ></span>
</th>

键盘箭头向下
去除
键盘箭头向上
{{header.title
}}

您应该在子可单击元素中使用

event.stopPropagation（）

这意味着您可以在

.ts

文件中添加以下内容：

editColumn(id: number, i: number, event) {
  event.stopPropagation();
  ...
}

...
<span
    (click)="editColumn(header.id, i, $event); $event.stopPropagation()"
    title="{{ header.title }}"
    >{{ header.title
    }}<i *ngIf="canEditTable" class="icon-edit-nocircle"></i
  ></span>
...

或

您只需添加

$event.stopPropagation（）

在模板中的处理程序后面编码如下：

editColumn(id: number, i: number, event) {
  event.stopPropagation();
  ...
}

...
<span
    (click)="editColumn(header.id, i, $event); $event.stopPropagation()"
    title="{{ header.title }}"
    >{{ header.title
    }}<i *ngIf="canEditTable" class="icon-edit-nocircle"></i
  ></span>
...

。。。
{{header.title
}}
...

---

注意：在某些情况下，您还需要添加

$event.preventDefault（）另外以同样的方式。
效果很好，我过去用过，但完全忘记了-谢谢