可分类性能

Question

~~我有一个 Sortable 的情况，我似乎无法在 Plunker 中复制。~~

据我所知，由于变化检测中的某些原因，Sortable 变慢了很多。慢到无法使用的地步。在视觉上，您可以看到第一个动画，但随着它慢慢完成变化检测，它会非常缓慢地刷新。

~~这是一个模仿我的代码的插件。 http://plnkr.co/edit/veH2Y6CkFZ1Dc5jwcPWZ?p=preview~~

<kendo-sortable [data]="columns"
                zone="abcdefg"
                [animation]="true"
                [activeIndex]="activeIndex"
                itemClass="item"
                emptyItemClass="emptyItem"
                activeItemClass="activeItem item">
  <ng-template let-column="item">
    <div class="container" (click)="itemClick(column)">
      <span class="col-name">
          {{column.title || column.field}}
      </span>
      <span class="col-width">{{column.width}}</span>
    </div>
  </ng-template>
</kendo-sortable>

基本上，对话框被包装在一个可重复使用的组件中，我将字符串、模板或组件输入其中。进入 SortableThingComponent 输入的 "columns" 数组是来自 kendo 网格的数组（所有新的 Column 对象）的副本。

~~由于我无法复制减速，我不确定发生了什么。有没有人看到任何关于 Sortable 的东西或有任何花絮？~~

编辑

这是一个包含网格的更新插件。我注意到如果网格中没有数据，Sortable 会更快。可行，但仍然有点慢。网格为虚拟滚动，页面大小为100。

http://plnkr.co/edit/hw8HaKpyZ0lRlVwF2tYp?p=preview

编辑 2

用数据更新了最后一个 plunker。现在我正在重现这个问题。对此可以做些什么？

Answer 1

这是目前的解决方法；在可排序对话框打开时分离网格组件的变化检测器：http://plnkr.co/edit/yy1Z4rWC53vS3xCnxrWT?p=preview

constructor(private changeDetectorRef: ChangeDetectorRef) { }
this.changeDetectorRef.detach(); // when dialog opens
this.changeDetectorRef.reattach(); // when dialog closes

在 plunker 中，由于我打开对话框的方式，我不得不添加一个 this.changeDetectorRef.detectChanges() 。目前，这是一个不错的解决方法。我可能会尝试使用变更检测策略来提高效率

可分类性能

Sortable performance

kendo-ui-angular2