如何在Angular 2中以非轮询方式处理元素尺寸变更事件？

我推荐你用浏览器原生的ResizeObserver API来实现，这是完全非轮询的方案，适配Angular 2+的场景，性能也很出色。下面给你两种具体的实现方式：

方式一：自定义Angular指令（灵活可控） #

这种方式可以让你完全掌控监听逻辑，适合需要自定义处理的场景：

1. 创建ResizeObserver指令
   用Angular CLI生成指令：

   ng generate directive resize-observer
   

   然后替换指令代码为：

   import { Directive, ElementRef, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
   
   @Directive({
     selector: '[appResizeObserver]'
   })
   export class ResizeObserverDirective implements OnInit, OnDestroy {
     // 定义输出事件，组件可以订阅这个事件获取尺寸变化
     @Output() resize = new EventEmitter<ResizeObserverEntry>();
     private observer: ResizeObserver | null = null;
   
     constructor(private el: ElementRef) {}
   
     ngOnInit(): void {
       // 初始化ResizeObserver，监听当前元素
       this.observer = new ResizeObserver((entries) => {
         const targetEntry = entries.find(entry => entry.target === this.el.nativeElement);
         if (targetEntry) {
           this.resize.emit(targetEntry);
         }
       });
       this.observer.observe(this.el.nativeElement);
     }
   
     ngOnDestroy(): void {
       // 组件销毁时清理监听，避免内存泄漏
       if (this.observer) {
         this.observer.unobserve(this.el.nativeElement);
         this.observer.disconnect();
         this.observer = null;
       }
     }
   }
   

2. 在组件中使用指令
   在需要监听的div上添加指令，并绑定事件处理函数：

   <div appResizeObserver (resize)="handleDivResize($event)">
     <!-- 你的div内容 -->
   </div>
   

3. 组件中处理尺寸变化
   在组件类中实现事件处理函数：

   handleDivResize(entry: ResizeObserverEntry): void {
     const { width, height } = entry.contentRect;
     console.log(`Div尺寸更新：宽度${width}px，高度${height}px`);
     // 这里写入你的业务逻辑
   }
   

方式二：使用Angular CDK（省心省力） #

如果你不想自己写指令，可以用Angular官方的CDK组件库，它已经封装好了ResizeObserver的功能：

1. 安装Angular CDK

   npm install @angular/cdk
   

2. 导入ObserversModule
   在你的模块中导入ObserversModule：

   import { ObserversModule } from '@angular/cdk/observers';
   
   @NgModule({
     imports: [
       // ...其他模块
       ObserversModule
     ]
   })
   export class YourModule { }
   

3. 在模板中使用cdkObserveResize指令
   直接给div添加指令并绑定事件：

   <div cdkObserveResize (cdkObserveResize)="handleDivResize($event)">
     <!-- 你的div内容 -->
   </div>
   

4. 处理尺寸变化事件
   和自定义指令的处理逻辑一致，事件参数同样是ResizeObserverEntry：

   handleDivResize(entry: ResizeObserverEntry): void {
     // 处理尺寸变化逻辑
   }
   

补充说明 #

• ResizeObserver是现代浏览器原生支持的API，不需要额外依赖，性能远优于轮询方案。
• 如果需要兼容旧浏览器（如IE），可以引入ResizeObserver的polyfill，但目前大部分项目已经不需要考虑IE兼容了。

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