angular - 调整表列大小时防止在表列上触发排序

Question

使用可调整大小的组件调整列的大小时，如何防止在表列上触发排序？当 mouseup 事件发生在正在调整大小的 th 上时，它会触发排序。我试图在 nzResizeEnd 事件中阻止它，但我想那为时已晚。有人能帮助我吗？示例https://stackblitz.com/edit/angular-jqs53u?embed=1&file=src/app/app.component.ts

去图书馆回购中提出问题，有人在 11 天前已经有。让我们希望快速修复。https://github.com/NG-ZORRO/ng-zorro-antd/issues/5199

Answer 1

您可以在表头上执行以下操作（删除不重要的代码）：

<th 
  [nzShowSort]="!resizing"
  (nzResizeStart)="resizing = true"
  (nzResizeEnd)="resizing = false"
>

组件 ts：

resizing: boolean = false;

工作示例

这将在调整大小时禁用排序，并在完成后重新启用它

Answer 2

通过在调整大小时禁用指针事件解决了该问题。

组件.ts： resizing: boolean = false;

模板：

<th 
  [class.pointer-events-none]="resizing"
  (nzResizeStart)="resizing = true"
  (nzResizeEnd)="resizing = false"
>

风格：

.pointer-events-none {
  pointer-events: none;
}

stackblitz展示了工作状态。现在调整大小不会导致排序方向发生变化。

在另一个StackOverflow 答案中找到了有关 css指针事件的信息。

还要感谢Poul Kruijt的帮助。