如何在Angular中监听DOM节点变化？

1. 原生MutationObserver API（精准直接） #

这是浏览器原生API，能针对性监听DOM节点的属性、子节点、文本等变化，完美适配Angular场景。如果只想追踪类名变化，可以配置监听规则减少无意义触发。

在Angular组件中使用示例：

import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-target-component',
  template: `<div #targetElement class="initial-class">待追踪的DOM节点</div>`
})
export class TargetComponent implements AfterViewInit, OnDestroy {
  @ViewChild('targetElement') targetElement!: ElementRef<HTMLElement>;
  private observer: MutationObserver | null = null;

  ngAfterViewInit(): void {
    // 配置仅监听类名属性变化，保留旧值方便对比
    const config = {
      attributes: true,
      attributeFilter: ['class'],
      attributeOldValue: true
    };

    this.observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        console.log('类名变化：');
        console.log('旧值:', mutation.oldValue);
        console.log('新值:', (mutation.target as HTMLElement).className);
        // 这里可根据需求自定义处理，比如记录日志、触发业务逻辑等
      });
    });

    this.observer.observe(this.targetElement.nativeElement, config);
  }

  ngOnDestroy(): void {
    // 组件销毁时停止监听，避免内存泄漏
    this.observer?.disconnect();
  }
}

2. 结合Angular变更检测钩子 #

利用Angular的DoCheck钩子，在每次变更检测周期中对比DOM节点状态（比如类名），适合追踪组件内部状态变化引发的DOM更新。

示例：

import { Component, ElementRef, ViewChild, DoCheck } from '@angular/core';

@Component({
  selector: 'app-check-component',
  template: `<div #targetElement [class.active]="isActive">动态类名节点</div>`
})
export class CheckComponent implements DoCheck {
  @ViewChild('targetElement') targetElement!: ElementRef<HTMLElement>;
  private previousClass = '';
  isActive = false;

  ngDoCheck(): void {
    const currentClass = this.targetElement.nativeElement.className;
    if (currentClass !== this.previousClass) {
      console.log('类名变更:', this.previousClass, '→', currentClass);
      this.previousClass = currentClass;
    }
  }
}

3. 封装自定义监听指令（复用性强） #

把MutationObserver封装成Angular指令，可给任意DOM节点添加指令，统一处理变化逻辑。

指令示例：

import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';

@Directive({
  selector: '[trackDomChanges]'
})
export class TrackDomChangesDirective implements OnInit, OnDestroy {
  @Input() trackAttributes: string[] = ['class']; // 可配置监听的属性列表
  private observer: MutationObserver | null = null;

  constructor(private el: ElementRef<HTMLElement>) {}

  ngOnInit(): void {
    const config = {
      attributes: true,
      attributeFilter: this.trackAttributes,
      attributeOldValue: true
    };

    this.observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        const attrName = mutation.attributeName;
        console.log(`属性${attrName}变化：`, mutation.oldValue, '→', this.el.nativeElement.getAttribute(attrName!));
      });
    });

    this.observer.observe(this.el.nativeElement, config);
  }

  ngOnDestroy(): void {
    this.observer?.disconnect();
  }
}

使用时直接在模板中添加指令：

<div trackDomChanges [trackAttributes]="['class', 'style']">需要追踪的节点</div>

内容的提问来源于stack exchange，提问作者Deian