javascript - Angular 14 - 滚动到具有特定 id 的 div

Question

我想在我的 View 第一次初始化后滚动到一个 div。到目前为止我的问题是 AfterViewInit 导致了一个问题，因为它没有完全渲染。 (从服务器获取数据，然后渲染该数据..)

到目前为止的代码:

  scrollTo(): void {
    if (!this.jumpedToMessage && this.jumpMessage != "0") {
      const element = document.getElementById(this.jumpMessage);
      // @ts-ignore
      element.scrollIntoView({behavior: 'auto', block: 'center', inline: 'nearest'});
      this.jumpedToMessage = true
    }
  }

控制台中的错误代码:

my-component.ts:58 ERROR TypeError: Cannot read properties of null(reading 'scrollIntoView')at my-component.scrollTo (my-component.component.ts:76:15)at Object.next (my-component.component.ts:65:18)at ConsumerObserver.next (Subscriber.js:91:33)at SafeSubscriber._next (Subscriber.js:60:26)at SafeSubscriber.next (Subscriber.js:31:18)at map.js:7:24at OperatorSubscriber._next (OperatorSubscriber.js:13:21)at OperatorSubscriber.next (Subscriber.js:31:18)at filter.js:6:128at OperatorSubscriber._next (OperatorSubscriber.js:13:21)

有什么想法可以解决这个问题吗？

重要:第一次渲染后仅初始化一次

Answer 1

也许您可以尝试使用不同的方法来实现您的目标，即使用 @ViewChild，无论如何，这都会更像 Angular。

在您的HTML中:

<p #scrollElement>Scroll here</p>

然后在您的TS文件中:

 @ViewChild("scrollElement")
 scrollEl: ElementRef;

 ngAfterViewInit() {
    this.scrollEl.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });
 }