1

我在页面上有一个大型 ngx-bootstrap 手风琴。当我打开一些较低的手风琴时，我希望它滚动页面，以便打开的手风琴从窗口顶部开始。我用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();
    }
4

3 回答 3

1

AFAIK 您刚刚拥有ngAfterViewChecked并ngAfterViewInit用于检测 dom 更新。

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

将您的罐头放在settimeout块代码末尾的 a 中（并将其从 中删除ngAfterViewChecked）。一些例子：

setTimeout(() => htmlInputElement.focus()); // focus an input
setTimeout(() => htmlElement.scrollIntoView()); // scroll into view
于 2018-11-26T09:14:49.827 回答
0

这是一个愚蠢的回应。isOpenChange但是您是否考虑过使用手风琴附带的自定义事件：

      <accordion-group heading="Group with isOpenChange event listener" 
(isOpenChange)="log($event)">
        <p>Some content</p>
      </accordion-group>

然后在对方：

log(event: boolean) {
    console.log(`Accordion has been ${event ? 'opened' : 'closed'}`);
  }
于 2018-11-26T11:29:12.360 回答
0

检查 Angular 文档以获取不同的生命周期挂钩。在组件视图初始化后调用生命周期钩子。

AfterViewInit()将根据您的要求执行一次。

在 Angular 完成组件视图的初始化后立即调用的回调方法。它仅在实例化视图时调用一次。

ngAfterVIewChecked()在加载组件的视图后调用，但它会检测到更改并执行。

于 2018-11-26T09:12:25.633 回答