要在Angular中初始化解析器后重构观察者,可以按照以下步骤进行操作:
ChangeDetectorRef
和NgZone
:import { Component, ChangeDetectorRef, NgZone } from '@angular/core';
ChangeDetectorRef
和NgZone
:constructor(private cdRef: ChangeDetectorRef, private ngZone: NgZone) {}
observer: MutationObserver;
ngAfterViewInit()
生命周期钩子中初始化解析器并创建观察者:ngAfterViewInit() {
this.ngZone.runOutsideAngular(() => {
this.observer = new MutationObserver(() => {
this.cdRef.detectChanges();
});
this.observer.observe(document.body, {
attributes: true,
childList: true,
subtree: true
});
});
}
ngOnDestroy()
生命周期钩子中停止观察者并断开连接:ngOnDestroy() {
if (this.observer) {
this.observer.disconnect();
}
}
在这个示例中,我们使用MutationObserver
来检测DOM中的变化。当观察到变化时,我们使用ChangeDetectorRef
的detectChanges()
方法来重新渲染组件。为了避免触发Angular的自动变更检测,我们使用NgZone
的runOutsideAngular()
方法将代码放在Angular之外执行。
请注意,在使用MutationObserver
时,请确保在ngAfterViewInit()
生命周期钩子中初始化解析器,因为此时DOM已经准备好了。
希望上述解决方法能够帮助到你!