使用MutationObserver观察到某些DOM更改后执行操作

Question

我创建了一个Directive，用于观察是否在DOM中添加了特定元素，如果是，那么我需要对DOM本身执行操作。

这是我的directive的样子

constructor(private elementRef: ElementRef) {
    const element = this.elementRef.nativeElement;

    this.changes = new MutationObserver((mutations: MutationRecord[]) => {
        mutations.forEach((mutation: MutationRecord) => {
            this.printChild(mutation.target);
        });
    }
    );
    this.changes.observe(element, {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true
    });
}
printChild(child: Node) {
        child.childNodes.forEach(element => {
            if (element.nodeName === 'MyElement') {
                this.changeEvent.emit(true); //Based on this value I need to call a function in another component
            }
        });
    };

现在在DOM中渲染了某个元素之后，如何在我的ComponentX中调用与DOM关联的方法以对DOM执行操作。 / p>

将directive应用于DOM元素之一以观察其子元素的变化

<div (domChange) ="onDomChange($event)"></div>