Angular Material标签页内Scroller高度异常问题求助

问题原因 #

切换标签时，未激活标签内的cdk-virtual-scroll-viewport处于不可见状态，其尺寸被计算为0，导致仅加载缓冲区大小的条目；切换后需手动触发checkViewportSize()重新计算尺寸。

可行解决方案 #

方案1：监听MatTab切换事件（推荐）

利用Angular Material标签组的selectedTabChange事件，在标签切换完成后，调用对应虚拟滚动组件的尺寸检查方法。

父组件模板：

<mat-tab-group (selectedTabChange)="handleTabSwitch($event)">
  <mat-tab label="标签页1">
    <app-custom-virtual-list #tab1List></app-custom-virtual-list>
  </mat-tab>
  <mat-tab label="标签页2">
    <app-custom-virtual-list #tab2List></app-custom-virtual-list>
  </mat-tab>
</mat-tab-group>

父组件TS：

import { Component, ViewChild } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material/tabs';
import { CustomVirtualListComponent } from './custom-virtual-list.component';

@Component({
  selector: 'app-tab-container',
  templateUrl: './tab-container.component.html'
})
export class TabContainerComponent {
  @ViewChild('tab1List') tab1List!: CustomVirtualListComponent;
  @ViewChild('tab2List') tab2List!: CustomVirtualListComponent;

  handleTabSwitch(event: MatTabChangeEvent) {
    const targetComponent = event.index === 0 ? this.tab1List : this.tab2List;
    // 延迟0ms确保DOM渲染完成后触发
    setTimeout(() => {
      targetComponent.refreshViewportSize();
    }, 0);
  }
}

子组件（自定义虚拟列表）TS：

import { Component, ViewChild } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-custom-virtual-list',
  templateUrl: './custom-virtual-list.component.html'
})
export class CustomVirtualListComponent {
  @ViewChild(CdkVirtualScrollViewport) viewport!: CdkVirtualScrollViewport;

  refreshViewportSize() {
    this.viewport.checkViewportSize();
  }
}

方案2：使用Intersection Observer监听组件可见性

通过浏览器原生的Intersection Observer API，监听虚拟滚动组件所在容器的可见状态，当组件变为可见时触发尺寸检查。

子组件TS：

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-custom-virtual-list',
  templateUrl: './custom-virtual-list.component.html'
})
export class CustomVirtualListComponent implements OnInit, OnDestroy {
  @ViewChild(CdkVirtualScrollViewport) viewport!: CdkVirtualScrollViewport;
  @ViewChild('viewportContainer') containerRef!: ElementRef;
  private visibilityObserver?: IntersectionObserver;

  ngOnInit() {
    this.visibilityObserver = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setTimeout(() => {
            this.viewport.checkViewportSize();
          }, 0);
        }
      });
    });
    this.visibilityObserver.observe(this.containerRef.nativeElement);
  }

  ngOnDestroy() {
    this.visibilityObserver?.disconnect();
  }
}

子组件模板：

<div #viewportContainer>
  <cdk-virtual-scroll-viewport itemSize="60" class="viewport">
    <!-- 你的列表项内容 -->
    <div *cdkVirtualFor="let item of itemList" class="list-item">{{ item }}</div>
  </cdk-virtual-scroll-viewport>
</div>

方案3：利用AfterViewChecked钩子（需控制触发频率）

通过Angular的AfterViewChecked生命周期钩子，检测组件从不可见变为可见的状态，触发尺寸检查。注意需添加状态判断，避免频繁调用影响性能。

子组件TS：

import { Component, ViewChild, AfterViewChecked } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@Component({
  selector: 'app-custom-virtual-list',
  templateUrl: './custom-virtual-list.component.html'
})
export class CustomVirtualListComponent implements AfterViewChecked {
  @ViewChild(CdkVirtualScrollViewport) viewport!: CdkVirtualScrollViewport;
  private wasComponentVisible = false;

  ngAfterViewChecked() {
    // 通过offsetParent判断组件是否可见
    const isVisible = this.viewport.elementRef.nativeElement.offsetParent !== null;
    if (isVisible && !this.wasComponentVisible) {
      setTimeout(() => {
        this.viewport.checkViewportSize();
      }, 0);
      this.wasComponentVisible = true;
    } else if (!isVisible) {
      this.wasComponentVisible = false;
    }
  }
}

方案对比 #

• 方案1：针对性强，仅在标签切换时触发，性能最优，推荐使用。
• 方案2：通用性高，适用于任何导致组件显示/隐藏的场景，但需要手动管理Observer的销毁。
• 方案3：无需依赖父组件，但AfterViewChecked触发频繁，必须添加状态判断避免无效调用。

内容的提问来源于stack exchange，提问作者Heiner Lamprecht