调整表列大小时防止在表列上触发排序答案

【问题标题】：Prevent sort trigger on a table column when resizing it调整表列大小时防止在表列上触发排序
【发布时间】：2020-05-15 16:10:04
【问题描述】：

当使用可调整大小的组件调整列的大小时，如何防止在表列上触发排序？当 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

【问题讨论】：

我没有在 stackblitz 中得到描述的行为，事实上它根本没有排序。你能仔细检查一下吗？那也许我能帮上忙。
@Minyc510 问题是没有对数据进行排序，示例中没有编码。问题是在调整大小时会触发排序，这是错误的。我添加了一个警报，以便在对触发器进行排序时更加明显。尝试调整列的大小，更具体地说是缩小它。
你应该向图书馆所有者提交一份错误报告
@PoulKruijt 是的，我会的。与此同时，我正试图以某种方式阻止该事件。
@PoulKruijt 去提交问题，有人在 11 天前已经提交了问题。让我们希望快速修复。

标签： angular ng-zorro-antd

【解决方案1】：

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

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

组件 ts：

resizing: boolean = false;

working example

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

【讨论】：

天哪，这本来是一个很好的解决方法，但它不能正常工作。它仍然会触发列收缩的排序。不过还是谢谢。
@haxor 在堆栈闪电战中不适合我。你确定吗？
是的，我在你的 stackblitz 链接和我的真实项目中都试过了。当我开始调整列的大小时，会松开 ShowSort 指令，但是当在调整后的大小上释放鼠标时，会触发排序。
@haxor 太奇怪了。当我按住鼠标调整大小时，我可以看到排序图标消失，释放鼠标时重新出现。你用的是什么浏览器？

【解决方案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 answer 中发现了有关 css pointer-events 的信息。

还要感谢Poul Kruijt的帮助。

【讨论】：