Angular 14中Resize Observable未触发问题求助

1. 检查宿主元素的类型与状态 #

• 确保宿主元素是块级元素：ResizeObserver不会监听inline元素的尺寸变化，给目标元素添加CSS样式display: block;或display: inline-block;。
• 确认元素尺寸会发生变化：如果元素尺寸固定且从未被修改（比如硬写死width/height），ResizeObserver自然不会触发回调，可手动调整元素大小测试。
• 元素不能被隐藏：如果元素或其父级设置了display: none、visibility: hidden，或者被移出DOM，ResizeObserver会停止监听。

2. 修正代码中的错误 #

（1）修复未定义的变量引用 #

代码里console.log('width', width);中的width未声明，会抛出ReferenceError导致回调执行中断，替换为实际获取到的宽度值：

this.observer = new ResizeObserver(entries => {
  this.zone.run(() => {
    const currentWidth = entries[0].contentRect.width;
    this.width$.next(currentWidth);         
    console.log('width', currentWidth);
  });
});

（2）将监听逻辑移至ngAfterViewInit #

ngOnInit阶段视图尚未完全初始化，宿主元素可能还未渲染到DOM中，ResizeObserver无法正常监听，建议把代码移到ngAfterViewInit生命周期：

public ngAfterViewInit(): void {
  this.observer = new ResizeObserver(entries => {
    this.zone.run(() => {
      const currentWidth = entries[0].contentRect.width;
      this.width$.next(currentWidth);         
      console.log('width', currentWidth);
    });
  });

  this.observer.observe(this.host.nativeElement);
}

（3）确认width$已正确声明 #

确保组件内正确初始化了Observable对象：

import { Subject } from 'rxjs';

// 组件类内部
private width$ = new Subject<number>();

3. 额外排查点 #

• 检查是否有其他代码移除了监听：比如调用过this.observer.unobserve(this.host.nativeElement)或this.observer.disconnect()。
• 验证ElementRef指向正确：在ngAfterViewInit中打印this.host.nativeElement，确认是目标DOM元素。

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