Angular 获取组件的高度和宽度

Question

我有一个手动调整大小的组件，所以我添加了一个监听器:

@HostListener('window:resize')
  public detectResize(): void {
    // get height and width of the component
    this.theHeight = // the coponent height
    this.theWidth = // the coponent height
  }

 theHeight = '';
 theWidth = '';

如何获取组件的高度和宽度？

Answer 1

你的代码是监听window对象，所以只能获取window的innerHeight和innerWidth。获取当前窗口高度有两种解决方案。

获取窗口大小
Angular window resize event
事件绑定(bind):

<div (window:resize)="onResizeHandler($event)">...</div>

public onResizeHandler(event): void {
   event.target.innerWidth;
   event.target.innerHeight;
}

Host Listener Decorator:(更简洁的方法!)

@HostListener('window:resize', ['$event'])
onResizeHandler(event: Event): void {
   event.target.innerWidth;
   event.target.innerHeight;
}

组件尺寸:
有一些方法可以获得组件大小，但这是一个非常低效的解决方案!!!!!!使用时要小心。底层 NativeElement Api 将直接访问 DOM! https://angular.io/api/core/ElementRef

编辑:
需要明确的是，使用此解决方案读取元素会很好。如果您需要操作您的元素，请务必使用 Renderer2 https://angular.io/api/core/Renderer2

// Inject a element reference into your component constuctor
...
constructor(private elementRef: ElementRef) {...}

// implement a listener on window:resize and attach the resize handler to it
public onResizeHandler(): void {
    this.elementRef.nativeElement.offsetHeight
    this.elementRef.nativeElement.offsetWidth

}

如果您只想更改调整大小事件的样式请务必在您的 css/scss 中使用 @media 查询。这将是最好的方法!