Angular中如何在窗口resize时获取子组件的宽度？

嘿，这个问题其实很好解决！你已经知道怎么监听窗口resize事件了，现在只需要加上获取目标子组件DOM引用这一步就行，下面给你两种常用的实现方式：

方法一：使用Angular的@ViewChild（推荐） #

这种方式是Angular的标准做法，通过模板引用变量绑定目标元素，然后直接获取它的宽度：

步骤1：给子组件添加模板引用变量 #

在你的模板里，给目标<div class='panel-2'></div>加上一个模板引用（比如#panelRef）：

<div class='panel-2' #panelRef></div>

步骤2：在组件类中获取DOM引用并监听resize #

在组件代码里，用@ViewChild获取这个元素，然后在resize事件中读取它的宽度：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  // 通过模板引用变量获取目标元素的DOM引用
  @ViewChild('panelRef', { static: false }) panelElement!: ElementRef<HTMLDivElement>;

  @HostListener('window:resize', ['$event'])
  onResize(event: Event) {
    this.getPanelWidth();
  }

  // 组件视图初始化后，先获取一次初始宽度
  ngAfterViewInit() {
    this.getPanelWidth();
  }

  private getPanelWidth() {
    if (this.panelElement?.nativeElement) {
      // clientWidth：内容宽度 + 内边距（不含边框、滚动条）
      const clientWidth = this.panelElement.nativeElement.clientWidth;
      // offsetWidth：内容宽度 + 内边距 + 边框 + 滚动条（如果存在）
      const offsetWidth = this.panelElement.nativeElement.offsetWidth;
      
      console.log('Panel-2 内容宽度:', clientWidth);
      console.log('Panel-2 整体宽度（含边框）:', offsetWidth);
    }
  }
}

方法二：直接通过DOM选择器获取（快速实现） #

如果不想加模板引用变量，也可以在resize事件里直接用document.querySelector找到目标元素：

@HostListener('window:resize', ['$event'])
onResize(event: Event) {
  const panelElement = document.querySelector('.panel-2') as HTMLDivElement;
  if (panelElement) {
    const panelWidth = panelElement.clientWidth;
    console.log('Panel-2 宽度:', panelWidth);
  }
}

注意事项 #

• 确保目标元素已经渲染完成：所以最好在ngAfterViewInit生命周期钩子之后再获取宽度，避免出现null的情况。
• 如果是动态生成的子组件（比如通过*ngIf或循环渲染），可以用@ViewChildren监听元素的变化，然后再获取宽度：

import { QueryList } from '@angular/core';

@ViewChildren('panelRef') panelElements!: QueryList<ElementRef<HTMLDivElement>>;

ngAfterViewInit() {
  // 监听元素列表的变化
  this.panelElements.changes.subscribe(() => {
    this.panelElements.forEach(el => {
      console.log('动态面板宽度:', el.nativeElement.clientWidth);
    });
  });
}

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