Angular中如何监听@ViewChild关联元素的属性变化？

我来给你梳理几种在Angular里实现元素属性/尺寸变化监听的靠谱方法，完美契合你想要的onElChanged自动触发需求：

这是现代浏览器原生支持的API，专门用来监听元素的宽高变化，比监听窗口resize精准得多——只会在目标元素本身尺寸改变时触发，不会因为其他元素变动或窗口缩放误触发。

修改后的component.ts代码如下：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit, OnDestroy {
  @ViewChild('plot') el: ElementRef;
  private resizeObserver: ResizeObserver;

  ngAfterViewInit() {
    // 初始化ResizeObserver，回调中自动触发你的onElChanged
    this.resizeObserver = new ResizeObserver(() => {
      this.onElChanged();
    });
    // 开始监听目标元素
    this.resizeObserver.observe(this.el.nativeElement);
  }

  onElChanged(){
    console.log('元素宽度更新：', this.el.nativeElement.clientWidth);
  }

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

如果你需要监听的是元素的非尺寸属性（比如class、id、style属性等）变化，可以用MutationObserver，它能精准捕获元素属性的修改动作：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit, OnDestroy {
  @ViewChild('plot') el: ElementRef;
  private mutationObserver: MutationObserver;

  ngAfterViewInit() {
    // 配置监听规则：监听所有属性变化，保留旧值用于比对
    const observerConfig = { attributes: true, attributeOldValue: true };
    this.mutationObserver = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        console.log(`属性【${mutation.attributeName}】从${mutation.oldValue}更新为${this.el.nativeElement.getAttribute(mutation.attributeName)}`);
        this.onElChanged();
      });
    });
    this.mutationObserver.observe(this.el.nativeElement, observerConfig);
  }

  onElChanged(){
    console.log('元素属性已变化，当前宽度：', this.el.nativeElement.clientWidth);
  }

  ngOnDestroy() {
    if (this.mutationObserver) {
      this.mutationObserver.disconnect();
    }
  }
}

如果你的元素尺寸只随窗口大小变化，也可以用Angular的HostListener快速实现，但这个方法会在整个窗口缩放时都触发，不管目标元素有没有实际变化，精准度较低：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('plot') el: ElementRef;

  @HostListener('window:resize')
  onElChanged(){
    console.log('窗口缩放，元素宽度：', this.el.nativeElement.clientWidth);
  }
}

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