angular - Angular 在 ngAfterViewInit 或 ngOnInit 中激活 @HostListener

Question

我有一个组件正在侦听组件的高度和宽度。

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.thewidth = event.target.innerWidth;
    this.theheight = event.target.innerHeight;
}

我的问题是在调整窗口大小之前我没有得到任何更改。

我还需要在组件加载时进行检查，这样我就有了初始高度和宽度。

我怎样才能做到这一点？

Answer 1

您可以通过注入组件来获取对主机组件的引用ElementRef：

constructor(private elementRef: ElementRef){}

ngAfterViewInit() {
    // timeout is needed when you are using `thewidth` or `theheight` inside your template
    setTimeout(() => {
        this.getHostDimensions();
    });
}

@HostListener('window:resize')
getHostDimensions() {
    const hostElement = this.elementRef.nativeElement;
    this.thewidth = hostElement.innerWidth;
    this.theheight = hostElement.innerHeight;
}