Angular窗口Resize性能优化：多组件重复触发变更检测问题咨询

核心优化：改用全局共享服务（优先方案） #

你的问题根源在于每个继承指令的组件都会创建独立的resize监听实例，导致重复触发变更检测。改用全局单例服务可以从根本上解决这个问题——只维护一个resize监听流，所有组件共享同一数据源，避免重复监听和冗余的变更检测。

实现全局窗口尺寸服务 #

import { Injectable, NgZone, OnDestroy } from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, takeUntil } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class WindowSizeService implements OnDestroy {
  private destroy$ = new Subject<boolean>();
  private windowWidth$ = new Subject<number>();

  currentWidth = window.innerWidth;

  constructor(private zone: NgZone) {
    this.initResizeListener();
  }

  private initResizeListener() {
    this.zone.runOutsideAngular(() => {
      fromEvent(window, 'resize').pipe(
        debounceTime(300),
        map((event: Event) => (event.target as Window).innerWidth),
        distinctUntilChanged(),
        takeUntil(this.destroy$)
      ).subscribe(width => {
        this.zone.run(() => {
          this.currentWidth = width;
          this.windowWidth$.next(width);
        });
      });
    });
  }

  getWindowWidth$() {
    return this.windowWidth$.asObservable();
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.complete();
    this.windowWidth$.complete();
  }
}

组件中使用服务 #

组件可以直接绑定服务的currentWidth，或者订阅宽度变化流：

import { Component } from '@angular/core';
import { WindowSizeService } from './window-size.service';

@Component({
  selector: 'app-child',
  template: `<div>当前窗口宽度：{{ windowSizeService.currentWidth }}</div>`
})
export class ChildComponent {
  constructor(public windowSizeService: WindowSizeService) {}
}

如果需要响应宽度变化执行逻辑：

ngOnInit() {
  this.windowSizeService.getWindowWidth$().subscribe(width => {
    // 处理断点分组逻辑
    this.updateElementGroups(width);
  });
}

指令模式的优化（若需保留指令） #

如果必须使用指令继承模式，不要让每个指令实例独立监听resize，而是让指令依赖上述全局服务，复用统一的数据流：

import { Directive, OnDestroy } from "@angular/core";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { WindowSizeService } from './window-size.service';

@Directive()
export abstract class WindowResizeDirective implements OnDestroy {
    winWidth: number;
    protected destroy$: Subject<boolean> = new Subject();

    constructor(private windowSizeService: WindowSizeService) {
        this.winWidth = windowSizeService.currentWidth;
        this.windowSizeService.getWindowWidth$().pipe(
          takeUntil(this.destroy$)
        ).subscribe(width => {
          this.winWidth = width;
        });
    }

    ngOnDestroy(): void {
        this.destroy$.next(true);
        this.destroy$.complete();
      }
}

额外性能优化项 #

• 启用OnPush变更检测策略：对于不需要频繁更新的组件，设置changeDetection: ChangeDetectionStrategy.OnPush，仅当输入属性变化或组件内部事件触发时才执行变更检测，大幅减少检测次数。
• 使用async管道：在模板中订阅宽度流时用<div>{{ windowSizeService.getWindowWidth$() | async }}</div>，Angular会自动管理订阅生命周期，避免内存泄漏，同时结合OnPush提升效率。

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