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

Question

我需要在使用时将jquery插件应用于单选按钮。Angular2Typescript

如果我分配 in ngAfterViewChecked，它会被多次调用并且控件会被多次刷新。

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

Answer 1

试试看这里。ngAfterViewInit_

Answer 2

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

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

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

Answer 3

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

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

export class NavBar implements AfterViewChecked{

   ngAfterViewChecked(){
      // jquery code here
   }
}

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