重新加载 DOMContent

Question

我理解angular是一个包含多个组件的页面应用程序，并使用路由在页面之间进行交互。

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

由于 index.html 页面已经加载（因此 DomContentLoaded 事件已被触发），我们遇到了问题。

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

Answer 1

我不太清楚，为什么你需要在angular中监听DomContentLoaded，因为那里有很多功能，取决于你使用的是哪个版本的angular。

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

}

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

Answer 2

请尽量不要使用此类侦听器，Angular（通常）不需要它们。尝试使用 Component lifecycle hooks.

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

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

@Component({
  ...
})
export class WidgetLgFunnelsComponent implements AfterViewChecked {
  ngAfterViewChecked() {
    console.log('Component finished rendering!')
  }
}

Answer 3

如果你想对组件模板中的 DOM 元素做一些事情，并且你想确保它们在那里，你应该使用 [=15] 中的 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
  }
}

Answer 4

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

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

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

重新加载 DOMContent

Reloading DOMContent

javascript

domcontentloaded

angular