Angular中如何以规范方式响应window resize事件？

老哥问得好！在Angular里直接硬怼window对象确实不太地道，不符合框架推崇的依赖注入和组件化思路，下面给你几种规范的实现方案，按需pick就行：

1. 用@HostListener装饰器（最简单直观的官方推荐方式） #

这是Angular官方最推荐的写法之一，专门用来监听宿主元素的事件，这里我们直接监听全局的window:resize事件，代码简洁还不用手动管理监听的销毁：

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

@Component({
  selector: 'app-resize-demo',
  template: `<p>当前窗口宽度: {{ windowWidth }}px</p>`
})
export class ResizeDemoComponent {
  windowWidth = window.innerWidth;

  @HostListener('window:resize', ['$event'])
  onWindowResize(event: Event) {
    this.windowWidth = (event.target as Window).innerWidth;
    // 这里写你的resize逻辑，比如调整组件布局、重新计算数据啥的
  }
}

划重点：组件销毁时Angular会自动帮你移除这个监听，完全不用担心内存泄漏的问题！

2. 用Renderer2服务（动态场景首选） #

如果需要动态添加/移除监听，或者想彻底摆脱对window对象的直接引用，那就用Angular封装的Renderer2服务，它是框架提供的DOM操作抽象层，完美符合依赖注入的思想：

import { Component, Renderer2, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-resize-demo',
  template: `<p>当前窗口高度: {{ windowHeight }}px</p>`
})
export class ResizeDemoComponent implements OnInit, OnDestroy {
  windowHeight = window.innerHeight;
  private resizeListener: () => void;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    // 用Renderer2绑定resize事件
    this.resizeListener = this.renderer.listen('window', 'resize', () => {
      this.windowHeight = window.innerHeight;
      // 执行你的resize逻辑
    });
  }

  ngOnDestroy() {
    // 组件销毁时手动调用监听的销毁函数，避免内存泄漏
    this.resizeListener();
  }
}

这种方式的优势是灵活——你可以在任何时候调用this.resizeListener()来取消监听，比如用户点击某个按钮后停止监听窗口变化。

3. 用RxJS创建Observable流（复杂异步场景必备） #

如果你的resize逻辑比较复杂，比如需要防抖（避免窗口拖动时疯狂触发事件），或者要和其他异步操作结合，那RxJS绝对是你的最佳搭档：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';

@Component({
  selector: 'app-resize-demo',
  template: `<p>防抖后的窗口尺寸: {{ windowSize.width }}x{{ windowSize.height }}</p>`
})
export class ResizeDemoComponent implements OnInit, OnDestroy {
  windowSize = { width: window.innerWidth, height: window.innerHeight };
  private resizeSubscription: any;

  ngOnInit() {
    // 从window resize事件创建Observable
    const resize$ = fromEvent(window, 'resize').pipe(
      debounceTime(300), // 防抖300ms，大大减少触发频率
      map(() => ({
        width: window.innerWidth,
        height: window.innerHeight
      }))
    );

    // 订阅流，处理resize事件
    this.resizeSubscription = resize$.subscribe(size => {
      this.windowSize = size;
      // 这里可以写复杂逻辑，比如根据窗口尺寸加载不同分辨率的图片、调整图表大小等
    });
  }

  ngOnDestroy() {
    // 一定要取消订阅，避免内存泄漏
    this.resizeSubscription.unsubscribe();
  }
}

debounceTime(300)这一步非常实用，能有效提升性能，毕竟窗口拖动时resize事件会触发几十次每秒，防抖后只会在用户停止拖动300ms后才执行一次逻辑。

内容的提问来源于stack exchange，提问作者Willem van der Veen