要在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已经准备好了。
希望上述解决方法能够帮助到你!