重新加载 DOMContent

Question

我知道 angular 是一个页面应用程序，具有多个组件，并使用路由在页面之间进行交互。

我们有这样一个角度应用程序。其中一个要求是，在特定组件上，我们需要将 eventListener 添加到 DomContentLoaded 事件中。

由于索引.html页面之前已经加载(因此DomContentLoaded事件已被触发(，因此我们遇到了问题。

我找不到重新触发 DomContentLoaded 事件的方法。

Answer 1

在创建第一个组件之前触发的 DomContentLoaded 事件。但是，您可以使用ngAfterViewInit()方法。ngAfterViewInit()是一种回调方法，在 Angular 完成组件视图初始化后立即调用。它仅在实例化视图时调用一次。

class YourComponent {
ngAfterViewInit() {
// Your code here
}
}

如果你真的需要捕获 DomContentLoaded 事件，请在 main.ts 文件中执行此操作。

Answer 2

我不知道，为什么你需要听 DomContentLoaded in angular，因为那里有很多函数，这取决于你使用哪个版本的角度。

export class SomeComponent implements AfterViewInit {
ngAfterViewInit(): void {
}

}

但是，您可以使用 *ngIf (Angular2+( 或 ng-if (AngularJS( 重新触发组件的渲染。只需在那里放置一个布尔值，然后在事件上切换布尔值。

Answer 3

请尽量不要使用这样的监听器，它们(通常(在 Angular 中是不需要的。尝试使用组件生命周期挂钩。

在您的情况下，我建议使用 ngAfterViewChecked((，它在组件完成渲染时触发。

import { Component, AfterViewChecked } from '@angular/core';
@Component({
...
})
export class WidgetLgFunnelsComponent implements AfterViewChecked {
ngAfterViewChecked() {
console.log('Component finished rendering!')
}
}

Answer 4

如果你想对组件模板内的 DOM 元素做一些事情，并且你想确保它们在那里，你应该使用 angular 的ngAfterViewInit钩子：

@Component({
// ...
})
export class SomeComponent implements AfterViewInit {
ngAfterViewInit(): void {
// here you can be sure that the template is loaded, and the DOM elements are available
}
}