如何扩展Angular Material的CdkVirtualScrollViewport组件？

问题根因 #

你在继承CdkVirtualScrollViewport时为子类指定了自定义模板，父类自带的模板不会被继承。父类CdkVirtualScrollViewport的内置逻辑依赖模板中#_contentWrapper模板变量对应的DOM节点，自定义模板中缺少该节点就会导致父类逻辑运行时_contentWrapper属性为undefined，触发你遇到的报错。

解决步骤 #

1. 在自定义模板中补充必填节点
   在你的virtual-scroll-viewport-extended.component.html中保留父类需要的_contentWrapper节点，同时可以在节点外添加你需要的额外内容，示例代码如下：

<!-- 可自由添加你需要的额外内容 -->
<div class="custom-extra-section">
  自定义额外内容
</div>
<!-- 必须保留的父类依赖节点，模板变量#_contentWrapper和类名不可修改 -->
<div #_contentWrapper class="cdk-virtual-scroll-content-wrapper">
  <ng-content></ng-content>
</div>

2. 子类中显式获取_contentWrapper实例
   在子类组件类中添加ViewChild查询，绑定自定义模板中的_contentWrapper节点，确保父类逻辑可以正常访问该属性：

export class VirtualScrollViewportExtendedComponent extends CdkVirtualScrollViewport implements OnInit {
  // 新增以下代码，覆盖父类的_contentWrapper属性
  @ViewChild('_contentWrapper') override _contentWrapper: ElementRef<HTMLElement>;

  constructor(
    public override elementRef: ElementRef<HTMLElement>,
    _changeDetectorRef: ChangeDetectorRef,
    ngZone: NgZone,
    @Optional() @Inject(VIRTUAL_SCROLL_STRATEGY) _scrollStrategy: VirtualScrollStrategy,
    @Optional() dir: Directionality,
    scrollDispatcher: ScrollDispatcher,
    viewportRuler: ViewportRuler) {
    super(elementRef, _changeDetectorRef, ngZone, _scrollStrategy, dir, scrollDispatcher, viewportRuler)
  }

  ngOnInit(): void {
  }
}

提示：如果你使用的Angular版本低于14，不支持override关键字，直接删除代码中的override修饰符即可。

验证 #

完成以上修改后，父类的虚拟滚动逻辑可以正常获取到内容容器节点，报错会消失，同时你也可以在自定义模板中自由添加内容容器外的额外元素，满足你的业务需求。

内容的提问来源于stack exchange，提问作者Marcelo Tedeschi