如何在 Angular 7 中設置 CdkVirtualScrollViewport 的初始索引（位置）

Question

我需要cdk-virtual-scroll-viewport的初始位置不是列表的第一個元素/項目。

現在我找到了scrollToIndex和scrollTo方法，但我只能在ngAfterViewChecked使用它時才能讓它們工作，這感覺ngAfterViewChecked 。

1. 有人可以確認在ngAfterViewChecked使用這些方法是正確的做事方式嗎？
2. 如果沒有，請展示替代方法/技術？

 @ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport; numbers: number[] = []; constructor() { for (let index = 0; index < 10000; index++) { this.numbers.push(index); } } ngAfterViewChecked() { this.cdkVirtualScrollViewport.scrollToIndex(2000); }

 <ul class="list"> <cdk-virtual-scroll-viewport style="height:264px" itemSize="88"> <ng-container *cdkVirtualFor="let n of numbers"> <li style="height:88px">{{ n }}</li> </ng-container> </cdk-virtual-scroll-viewport> </ul>

Answer 1

我有同樣的問題，我有一個不太優雅的解決方案

contentCheck = 0

ngAfterViewChecked() {
  if (this.contentCheck < 3) {
  this. cdkVirtualScrollViewport.scrollToIndex(4000);
  this.contentCheck++;
 }
}

3 檢查后 scrollToIndex 工作。

Answer 2

雖然不是完美的解決方案，但您可以通過將 afterViewInit 與 setTimeout 結合來實現此行為：

ngAfterViewInit() {
    setTimeout(() => {
        this.cdkVirtualScrollViewport.scrollToIndex(50);
    });
}

Answer 3

我們可以使用setRenderedRange方法：

@ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;

ngAfterViewInit() {
    const offset = 10; // that's an example
    if (this.virtualScroll) {
        setTimeout(() => {
            const currentRange = this.virtualScroll.getRenderedRange();
            this.virtualScroll.setRenderedRange({ start: currentRange.start + offset, end: currentRange.end + offset });
        });
    }
}

注意：我不確定它是否特定於我的用例，但僅通過設置預期范圍，似乎不會考慮前面的項目（我們無法向上滾動）。 使用scrollToIndex似乎很重要，以便正確更新滾動。 這是我的解決方法，將范圍設置為減一，然后再滾動一：

    const currentRange = this.virtualScroll.getRenderedRange();
    this.virtualScroll.setRenderedRange({ start: currentRange.start + offset - 1, end: currentRange.end + offset - 1});
    this. virtualScroll.scrollToIndex(offset);