带虚拟卷轴的角材料CDK树状构件

Question

角材料CDK树组件文档说：

平坦的树通常更容易造型和检查。它们也更容易滚动变化，如无限或虚拟滚动__

对如何将虚拟滚动应用于CDK平面树有什么想法？

我有一棵巨大的树要渲染，现在它太慢了，当我递归地打开所有节点时，它就会崩溃。

我尝试过@ar角/cdk-实验性的，但没有想出如何将它与树组件集成。

Answer 1

我知道这是旧的，但我遇到这个线程时，我试图找出同样的事情，经过大量的实验，我已经找到了一个基本的工作例子，一个几乎滚动平坦的树，需要很少修改，如果你已经有一个工作的cdk树。

我的解决方案的关键是放弃cdk树指令，直接与*cdkVirtualFor一起使用我的MatTreeFlatDataSource和FlatTreeControl。您可能已经将这些对象设置为作为输入传递到cdk树中。cdk-tree实际上只是一个非常轻的包装器，围绕着这两个正在做所有繁重工作的对象。

下面是一个stackblitz，更具体的例子：https://stackblitz.com/edit/angular-b5nkkd?file=src/app/app.component.html

下面是其中的内容：

• 两个滚动平坦的树，它们从相同的底层数据源中提取，并由相同的底层树控件控制(即，它们持有相同的数据，无论您对一棵树做什么，也会在另一棵树中反映出来)。
• 第一棵树使用cdk-tree指令，但我不知道如何使它与CDK虚拟滚动一起工作，从而使它呈现所有节点。
• 第二棵树不使用cdk树，但我能够在很少更改的情况下使虚拟滚动干净地工作。因此，您必须自己进行样式化和一些基本逻辑，但是如果您查看stackblitz中模板代码的差异，您会发现它并不是那么糟糕。
• 我正在显示每个滚动容器呈现的节点数，以演示虚拟滚动在一个而不是另一个中工作。

Answer 2

虚拟视图的主要功能是跟踪滚动事件，并通知您当前屏幕上有哪些元素。使用此信息，可以将树的数据源修改为仅为屏幕上的节点。

问题是，现在，视图只有在高度一致的项目中才能很好地工作。展开树的一个节点时，该节点的高度与其他关闭节点的高度不一致。为了解决这个问题，您可以在扩展节点时将子节点添加到虚拟视图的数据源中。

现在，我将忽略扩展的节点问题。

要使用树获得基本的虚拟滚动，请将以下内容添加到模板中：

<cdk-virtual-scroll-viewport itemSize="48" style="height: 200px;">
  <ng-container *cdkVirtualFor="let item of fullDatasource"></ng-container>

  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">...</mat-tree-node>
  </mat-tree>
</cdk-virtual-scroll-viewport>

我们创建视图端口，告诉它每个节点的大小。然后，我们添加virtualForOf，传入fullDatasource，以便视图知道它需要有多高。这可能有点欺骗，因为我认为virtualForOf的预期用途是模板包含要滚动的项，但保持它为空似乎有效。

唯一剩下的就是确保树的数据源仅仅是整个数据源的可见项。我们将改变最初在构造函数中声明它的方式，但这是更令人兴奋的部分：

  ngAfterViewInit() {
    this.virtualScroll.renderedRangeStream.subscribe(range => {
      console.log(range, 'range')
      this.dataSource.data = this.fullDatasource.slice(range.start, range.end)
    })
  }

我们订阅renderedRangeStream，每当滚动变化时，它就会发出一个范围。每当发生这种情况时，我们只需将数据源设置为相应的切片！

带结果的Stackblitz，希望这足以让你开始！