Angular中组件尺寸变化时触发函数的实现方案

首先把原有的响应式逻辑抽成独立方法，方便复用：

private handleResponsiveLogic(): void {
  // 这里放你原来onResize里的响应式处理代码
}

@HostListener("window:resize", ["$event"])
onResize(): void {
  this.handleResponsiveLogic();
}

接下来提供两种实现方式，按需选择：

方式一：侧边栏切换时主动触发逻辑 #

如果侧边栏是你可控的组件，在侧边栏展开/折叠的触发点，通过事件通知目标组件执行响应式逻辑：

1. 在侧边栏组件中定义输出事件：

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

@Component({
  selector: 'app-sidebar',
  // ...
})
export class SidebarComponent {
  isCollapsed = false;
  @Output() sidebarToggled = new EventEmitter<void>();

  toggleSidebar(): void {
    this.isCollapsed = !this.isCollapsed;
    this.sidebarToggled.emit();
  }
}

2. 在目标组件的模板中监听该事件，直接调用响应式逻辑：

<app-sidebar (sidebarToggled)="handleResponsiveLogic()"></app-sidebar>

这种方式简单直接，仅针对侧边栏切换场景触发，性能开销小。

方式二：监听组件自身尺寸变化（通用方案） #

使用浏览器原生的ResizeObserverAPI，监听组件宿主元素的尺寸变化，不管是侧边栏切换、其他元素布局变化还是窗口 resize，只要组件尺寸改变就触发逻辑：

1. 注入ElementRef并实现监听逻辑：

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

@Component({
  selector: 'app-your-component',
  // ...
})
export class YourComponent implements AfterViewInit, OnDestroy {
  private resizeObserver: ResizeObserver | undefined;

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit(): void {
    // 监听组件宿主元素的尺寸变化
    this.resizeObserver = new ResizeObserver(() => {
      this.handleResponsiveLogic();
    });
    this.resizeObserver.observe(this.elementRef.nativeElement);
  }

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

  private handleResponsiveLogic(): void {
    // 响应式处理代码
  }

  @HostListener("window:resize", ["$event"])
  onResize(): void {
    this.handleResponsiveLogic();
  }
}

这种方案更通用，能覆盖所有导致组件尺寸变化的场景，但注意要在组件销毁时断开监听，防止内存泄漏。

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