如何在 angular 中获取子组件 onResize 的宽度？

Question

我试图在调整大小时获取子组件的宽度 window。

我知道如何通过以下方式获取整个应用程序的宽度：

  @HostListener('window:resize', ['$event']) 
   onResize(event) {
    event.target.innerWidth;
    console.log('Window resize: ' + event.target.innerWidth);
 }

但我不太确定如何只定位一个子组件并在调整大小时获得它的宽度window。

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

任何人都可以告诉我我错过了什么吗？非常感谢！

 <div class = "main">
     <div class = 'left-section'>Left bar</div>
         <div class = 'right-section'>
             <div class = 'panel-1'></div>
             <div class = 'panel-2'></div>
         </div>
</div>

Answer 1

将 #panel2 添加到您的面板 2，然后在您的 TS 文件中添加 @ViewChild('panel2') panel2; 作为 class.

的属性

当触发 ngOnInit 挂钩时，您可以访问 this.panel2.nativeElement，您也可以在 HostListener 内部使用它，因此您不再需要依赖事件的目标！

如何在 angular 中获取子组件 onResize 的宽度？

How to get width of a sub component onResize in angular?

resize

typescript

angular