javascript - 重新加载 DOMContent

Question

我了解 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 中是不需要的。尝试使用组件生命周期钩子。

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

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

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

Answer 3

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

@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 文件中进行。