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

Question

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

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

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

Answer 1

试试ngAfterViewInit，看看这里。

Answer 2

一旦 DOM 树发生任何更改，就会调用ngAfterViewChecked()。

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

建议不要将业务逻辑放在此方法中。但只有与屏幕刷新相关的逻辑，比如在新消息传入时将窗口滚动到底部。

Answer 3

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

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