问虚拟涡旋在角材料2表中的应用@角/cdk-实验

EN

还没有得到支持。但是有些人尝试做一些POC。这里有一个https://github.com/angular/material2/issues/10122#issuecomment-440442656。

在这个问题中还讨论了虚拟滚动以及上面的POC是如何工作的。

这并不是目前存在的问题。CdkTable (或MatTable)组件还不支持虚拟滚动，而是。

@angular/cdk中的虚拟滚动支持仍然处于试验阶段--这将在版本7中发生变化。

然而，当这个特性落地时，下一步将是为表实现它。我会解释原因。

cdk-virtual-scroll-viewport是*cdkVirtualFor指令的容器，如果我们查看这个指令(CdkVirtualForOf)，我们可以看到

1. It 实现 CollectionViewer (代码)
2. 它接受(使用) DataSource实例(代码)

考虑到这一点，让我们看看CdkTable

1. It 实现 CollectionViewer (代码)
2. 它接受(使用) DataSource实例(代码)

这种相似性不是偶然的，cdk-virtual-scroll-viewport可以像使用cdkVirtualFor那样使用表(经过一些调整)。

我不确定最终的实现是什么，开发人员是否能够从外部包装表，还是表将在内部设置，但这是它的方向。

如果我不得不猜测，我会说，开发人员将选择是否要用虚拟卷轴包装表。这是因为cdk-virtual-scroll-viewport不查询cdkVirtualFor (通过ViewChild)，它是被动的，等待附加的东西。这是一个迹象，表明这是前手的想法。

您现在就可以这样做，通过扩展CdkTable并自己进行调整，这将需要了解表的内部结构，并且可能需要一些时间。我建议你等一会儿。

我做了一个定制指令，什么能解决这个问题：

1)安装一个包：$ npm install -save ng-table-virtual-scroll并将其添加到导入中：

import { TableVirtualScrollModule } from 'ng-table-virtual-scroll';

@NgModule({
  imports: [
    // ...
    TableVirtualScrollModule
  ]
})
export class AppModule { }

2)使用来自包的自定义DataSource：

import { TableVirtualScrollDataSource } from 'ng-table-virtual-scroll';

@Component({...})
export class MyComponent {

  dataSource = new TableVirtualScrollDataSource();

}

3)在viewport容器上使用指令：

<cdk-virtual-scroll-viewport tvsItemSize style="height: 400px;">
    <table mat-table [dataSource]="dataSource">
    ...
    </table>
</cdk-virtual-scroll-viewport>

该指令允许您使用mat-table的所有功能，如排序、分页、粘性头/列等。