如何注册DOM元素已由另一个javascript库创建的Angular2组件

Question

假设我有一些组件DynamicallyAddedComponent与选择器dynamically-added关联。还有另一个组件ParentComponent，它包含一些其他非角度的第三方javascript，该javascript正在操纵其内部DOM树，并可能添加或删除<dynamically-added>标记。

当我将<dynamically-added>标记直接添加到ParentComponent的模板中时，它表现得很好，但当我的第三方库添加标记时，angular无法识别已添加组件。

我已经将这两个组件添加到app.module.ts中的@NgModule声明中。我还在第三方修改事件的事件处理程序中添加了对ChangeDetectorRef.detectChanges()和ApplicationRef.tick()的调用。

那么，我如何手动告诉Angular组件已经添加或删除呢？Angular如何在内部识别和引导组件？

Answer 1

您可以在ngZone内部运行第三方事件，该事件将触发DOM更改检测。

component.ts内部

constructor( public ngZone: NgZone) {}
ngZone.run( () => { // Change the property within the zone
//3rd party event action
});