Question

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

我们有一个类似的应用程序。要求之一是在特定组件上，我们需要向DomContentLoaded事件添加一个eventListener。

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

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

Answer 1

我不确定，为什么您需要听用angular的DomContentLoaded，因为那里有很多功能，取决于您使用哪个Angle版本。

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元素进行某些操作，并且想要确保它们在那里，请使用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
  }
}

Answer 4

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

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

如果您仍然确实需要捕获DomContentLoaded事件，请在main.ts文件中进行。

重新加载DOMContent

4 个答案: