javascript - Angular2 在 dom 完成渲染后执行操作

Question

我在页面上有一个很大的 ngx-bootstrap Accordion 。当我打开一些较低的 Accordion 时，我希望它滚动页面，以便打开的 Accordion 从窗口顶部开始。我用 scrollIntoView 实现了滚动部分，但现在的问题是在正确的时间执行它。我目前在 ngAfterViewChecked 中执行此操作，但 viewChecked 被多次触发(mousemove、mouseenter 等...)。有没有一种方法可以仅在 DOM 完成渲染后与 angular2+ changeDetection 分开触发一段代码？

解决方案

这是开始起作用的解决方案。

constructor(elementRef: ElementRef) {
    this.elementRef = elementRef
  }

getData(){
   this.getService().then(result => {
      #do stuff with result
      setTimeout(() => this.scrollToBegin());
    }).catch((err: any) => {
    });
}

scrollToBegin(): any{
      this.elementRef.nativeElement.scrollIntoView();
    }

Answer 1

据我所知，您只有 ngAfterViewChecked 和 ngAfterViewInit 用于检测 dom 更新。

根据我的经验，有时您需要在 settimeout 中编写用于 dom 更改的代码，以为此安排一个宏任务(异步更新)，以便您的代码将在下一个更改检测周期中运行(这正是您所需要的)。有关详细信息，请参阅 this article

将您的 could 放在 block 代码末尾的 settimeout 中(并将其从 ngAfterViewChecked 中删除)。 一些例子:

setTimeout(() => htmlInputElement.focus()); // focus an input
setTimeout(() => htmlElement.scrollIntoView()); // scroll into view