Cdk 虚拟滚动问题答案

【问题标题】：Cdk virtual scrolling issueCdk 虚拟滚动问题
【发布时间】：2018-11-08 08:55:25
【问题描述】：

有没有人遇到过 angular 7 cdk 虚拟滚动在 mat-tab 组中工作异常的问题。

https://github.com/angular/material2/issues/13981

我的城市组件模板是这样的

<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" minBufferPx="200" maxBufferPx="400" (scrolledIndexChange)="getNextBatch($event)">
  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: trackByFn" class="list-group-item state-item">
    <div class="state">{{state.name}}</div>
    <div class="capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

当将此城市组件作为第二个选项卡放入 mat-tab-group 时

<mat-tab-group>
  <mat-tab label="Country">
    <app-country></app-country>
  </mat-tab>
  <mat-tab label="City">
    <app-city></app-city>
  </mat-tab>
</mat-tab-group>

结果看起来像 below:

stackblitz 代码在这里： https://stackblitz.com/edit/angular7-virtual-scroll-issue

有人对这个问题有什么想法吗？

【问题讨论】：

标签： angular angular7 angular-cdk

【解决方案1】：

你告诉它保持缓冲区大小在 200px 和 400px 之间，但你的滚动窗口比这要高得多。

将最小值和最大值都更改为 1200 像素，这将保持项目覆盖您的视口，即使您向下滚动查看更多项目也是如此。

https://stackblitz.com/edit/angular7-virtual-scroll-issue-ftcnng

【讨论】：

更改最小值和最大值是解决方法。因为属性名是buffer，所以应该是视口大小的附加量。
这是正确的解决方案，适合所有来到这里的人。谢谢！我欠你一杯咖啡；）
这不是正确的解决方案。它是视口的附加缓冲区
也许是@itsundefined，但这不是我上次检查时的工作方式/工作方式

【解决方案2】：

您需要通过使用matTabContent 属性在ng-template 中声明正文来延迟加载选项卡内容。这样，只有在显示选项卡时才会计算视口大小。

  <mat-tab label="City">
    <ng-template matTabContent>
      <app-city></app-city>
    </ng-template>
  </mat-tab>

见：https://material.angular.io/components/tabs/overview#lazy-loading

【讨论】：

这是正确的解决方案，所有其他的充其量都是解决方法。谢谢！

【解决方案3】：

该问题已在一段时间前提出，但有一个解决方案不是解决方法。

首先你需要 Viewport Reference：

@ViewChild(CdkVirtualScrollViewport, {static: false}) cdkVirtualScrollViewport: CdkVirtualScrollViewport;

然后您可以在视口大小发生变化时调用方法checkViewportSize()。在调用此方法之前，您需要更新 Viewport 容器的样式高度。

this.heightChange$.subscribe(() => {
    this.cdkVirtualScrollViewport.checkViewportSize();
});

【讨论】：

这是正确答案。它还将更新 maxBufferPx 和 minBufferPx 以按照描述的方式工作（屏幕外的额外缓冲区）。我在多个项目中使用此修复程序。

【解决方案4】：

对我有用，谢谢！

  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.viewport.checkViewportSize();
  }

【讨论】：

调用checkViewportSize() mathod 后要做什么。
基本上没什么，只是解决问题

【解决方案5】：

仅使用 ItemSize。避免使用最大和最小缓冲区。

<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" >

它必须是单个项目的精确像素高度。

【讨论】：