How to implement Virtual scroll on material tree grand child level

问题

I have an angular mat-tree with parent, child and grand child level. On clicking of child I am adding grandchild in it. But grandchild having huge data upto 4k records. Which is making tree extremely slow. My code as below

<div *ngIf="isGrandChildLoaded"><mat-spinner></mat-spinner></div>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <!-- use a disabled button to provide padding for tree leaf -->
    <button mat-icon-button disabled></button>
    {{node.name}}
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.name">
      <mat-icon class="mat-icon-rtl-mirror" (click)="clickTreeNode(node)">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
  </mat-tree-node>
</mat-tree>

Please note what I have tried in stackblitz: My code

I have noted virtual scroll will be the best solution in this case. And I have saw an example: Refernce

But in example it is having virtual-scroll in whole tree level with full dataSource.

How Can add Virtual scroll in grandchild level with 10 elements at a time. So it wont freeze DOM and Tree. Please guide me...

来源：https://stackoverflow.com/questions/56064233/how-to-implement-virtual-scroll-on-material-tree-grand-child-level