Angular2--ngAfterViewChecked被多次调用。如何在DOM完全加载后仅调用一次方法？

Question

我需要将 jquery 插件应用到使用 Typescript 的 Angular2 单选按钮中。如果我在 ngAfterViewChecked 中分配，它会被多次调用并且控件会多次刷新。有没有其他方案可以在 DOM 准备好后调用 JavaScript 方法？

- Kcs

Answer 1

尝试使用ngAfterViewInit，并在此处查看更多信息。

- SeleM

---

当需要跟踪更改并且希望在发生此类更改后运行某些函数时，会发生什么情况？ ngAfterViewInit 是否会多次运行/一直运行？ - Hlawuleka MAS

是的，你可以一直使用 RxJs 来实现你所要求的功能。就像观察一条变化流，一旦得到你需要的内容，你就会触发一个特定的事件！ - SeleM

“一直都是”- 我不同意，它并没有一直运行。如果在“ngAfterViewInit”内部使用“console.log()”，它不会被无限记录，因此实际上它并没有一直运行。“使用RxJs来实现你所要求的”- 这是有道理的，并且肯定会起作用。 - Hlawuleka MAS

@HlawulekaMAS 在这种情况下，rxjs 中的哪些功能有帮助？ - Moanna Tabala

Answer 2

ngAfterViewChecked()方法会在DOM树发生任何变化时被调用。

因此，如果DOM树发生了多次变化，ngAfterViewChecked()方法将被调用多次。

建议不要在此方法中放置业务逻辑，而只放置与屏幕刷新相关的逻辑，例如如果有新消息，则将窗口滚动到底部。

- Richard

Answer 3

当我依赖于DOM准备就绪时，我使用ngAfterViewChecked。

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

export class NavBar implements AfterViewChecked{

   ngAfterViewChecked(){
      // jquery code here
   }
}

- Amr Abdalrahman

Answer 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;
      }

- stolorma