Angular2 -- ngAfterViewChecked 被多次调用..如何在 DOM 完全加载后只调用一次方法？答案

【问题标题】：Angular2 -- ngAfterViewChecked is called many times..How to call a method just once after DOM is completely loaded?Angular2 -- ngAfterViewChecked 被多次调用..如何在 DOM 完全加载后只调用一次方法？
【发布时间】：2017-05-14 12:01:37
【问题描述】：

我需要使用Typescript 将jquery 插件应用于Angular2 中的单选按钮。

如果我在ngAfterViewChecked中赋值，会被多次调用，多次刷新控件。

DOM 准备好后调用 javascript 方法的替代方案是什么？

【问题讨论】：

标签： angular angular-lifecycle-hooks

【解决方案1】：

试试ngAfterViewInit看看here。

【讨论】：

但是，当需要跟踪更改并且您希望在发生此类更改后运行某些功能时会发生什么？ ngAfterViewInit 是否多次/一直运行？
是的，一直以来，您都可以只使用 RxJs 来满足您的要求……就像观察一连串的变化，一旦您得到您需要的东西，您就会触发一个特定的事件!
“一直是” - 我不同意，它不会一直运行。如果你 console.log() ngAfterViewInit 里面有东西，它不会被无限记录，因此它实际上并不是一直运行。 “根据您的要求使用 RxJs” - 这是有道理的，而且肯定会奏效。

【解决方案2】：

ngAfterViewChecked() 一旦 DOM 树发生任何变化就会被调用。

因此，如果 DOM 树多次更改，ngAfterViewChecked() 方法将被调用多次。

建议不要把业务逻辑放在这个方法里。但是只有屏幕刷新相关的逻辑，比如如果有新消息进来，就把窗口滚动到底部。

【讨论】：

【解决方案3】：

当我依赖 DOM 准备好时，我一直在使用 ngAfterViewChecked。

import { Component, AfterViewChecked } from '@angular/core'; 

export class NavBar implements AfterViewChecked{

   ngAfterViewChecked(){
      // jquery code here
   }
}

【讨论】：

【解决方案4】：

我不完全知道您需要做什么和/或实现什么，但我会向您展示我针对类似用例的解决方案。

我的问题是我需要在加载时向下滚动一个 div。 AfterViewChecked 执行了多次，但我需要在这个生命周期中向下滚动。我就是这样做的，也许对你有帮助：

    public scrollSuccessfull = false; // global variable


    public ngAfterViewChecked(): void {
        if (!this.scrollSuccessful) {
          // gets executed as long as the scroll wasnt successfull, so the (successful) scroll only gets executed once
          this.scrollSuccessful = this.scrollToBottom(this.internal ? this.internalChatDiv : this.externalChatDiv);
        }
      }

    private scrollToBottom(element: ElementRef): boolean {
        if (element) {
          element.nativeElement.scrollTop = element.nativeElement.scrollHeight;
          return element.nativeElement.scrollTop !== 0;
        }

        return false;
      }

【讨论】：