0

我目前有一个用例，我想扩展 CdkVirtualScrollViewport 组件，以便可以访问其呈现的模板。

具体情况是基本模板呈现<div #contentWrapper class="cdk-virtual-scroll-content-wrapper">包装<ng-content>传递的 a 。我想有一种方法可以在此标头之外传递额外的内容，为此，我想扩展组件以拥有自己的模板。

不幸的是，它并没有开箱即用，经过多次尝试我就放弃了。最新状态为：

import { Directionality } from '@angular/cdk/bidi'
import { CdkFixedSizeVirtualScroll, CdkScrollable, CdkVirtualScrollViewport, FixedSizeVirtualScrollStrategy, ScrollDispatcher, ViewportRuler, VirtualScrollStrategy, VIRTUAL_SCROLL_STRATEGY } from '@angular/cdk/scrolling'
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, NgZone, OnInit, Optional, ViewChild, ViewEncapsulation } from '@angular/core';

export class CustomVirtualScrollStrategy extends FixedSizeVirtualScrollStrategy {
  constructor() {
    super(50, 250, 500);
  }
}

@Component({
  selector: 'aw-virtual-scroll-viewport-extended',
  templateUrl: './virtual-scroll-viewport-extended.component.html',
  styleUrls: ['./virtual-scroll-viewport-extended.component.scss'],
  host: {
    'class': 'cdk-virtual-scroll-viewport',
    '[class.cdk-virtual-scroll-orientation-horizontal]': 'orientation === "horizontal"',
    '[class.cdk-virtual-scroll-orientation-vertical]': 'orientation !== "horizontal"',
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {
      provide: VIRTUAL_SCROLL_STRATEGY,
      useClass: CustomVirtualScrollStrategy
    }
  ]
})
export class VirtualScrollViewportExtendedComponent extends CdkVirtualScrollViewport implements OnInit {

  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 {
  }
}

我遇到的错误是：

TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at CdkVirtualScrollViewport._doChangeDetection (scrolling.js:1006)

在这一行：this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;

所以_contentWrapper是未定义的，但我不知道为什么要扩展组件的内部功能。

也许有人可以分享这个话题？

4

0 回答 0