Angular 在 ngAfterViewInit 或 ngOnInit 中激活@HostListener

Question

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

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

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

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

我该怎么做？

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;
}

Angular 在 ngAfterViewInit 或 ngOnInit 中激活@HostListener

Angular activate @HostListener in ngAfterViewInit or ngOnInit

angular

angular11