Angular-对导航后呈现的内容作出反应

Question

我有一个角度应用程序，它有几个不同的组件和页面，可以显示用户创建的html内容。内容完全加载后，我需要在其中搜索特定的元素，并向其中添加onclick事件。

因此，我的想法是订阅路由器并对NavigationEnd事件做出反应，以筛选DOM。问题：NavigationEnd上的DOM尚未就绪。

我也不能使用document.ready，因为它只在第一页加载时启动，而且显然我不能使用生命周期挂钩，除非我把它们放在每个组件中。

我目前的尝试是在一个服务中，看起来像这样：

setupClickEventSubscription(){
this.router.events
.subscribe(e => {
if (e instanceof NavigationEnd) {
//returns nothing because DOM not ready
document.querySelectorAll('[click-event]').forEach(el => {
el.addEventListener('click', this.clickFunction.bind(this))
})
}
})
}

我需要一个全球性的"；再次准备文档"-订阅我是不是错过了什么？

Answer 1

也许你应该看看ViewChild，例如ViewChildren-可能看起来像：

@ViewChildren(SomeDirective) elemets: QueryList<SomeDirective>

或使用模板元素参考：

@ViewChildren("whatEverRef", { read: ElementRef }) whatEverRef: QueryList<ElementRef>; 

模板：

<li #whatEverRef>yo</li>