如何使用 Angular @HostListener onLoad 来获取视口的当前宽度？

Question

我目前正在使用 Angular @HostListener来获取视口的当前宽度，onResize()如下所示：  @HostListener('window:resize', ['$event'])  onResize(event?) {    window.innerWidth <= 400 ? this.width = 200 : this.width = 400;  }但我还需要一种方法来设置组件的 this.width onLoad()（在构造函数中或至少在ngOnInit()生命周期中）。我没有找到使用 HostListener 执行此操作的方法。是否有一个很好的选择来获取视口的当前宽度（在调整大小和加载时）并对其做出反应？我的目标是在移动视口大小上设置Leaflet-PopUp的 maxWidth。

Answer 1

如果您使用引导程序，则可以使用引导程序 CSS 媒体查询，

https://getbootstrap.com/docs/4.0/layout/overview/

否则，您尝试的方法是正确的方法，而无需使用外部依赖项。

Answer 2

如果您在构造函数中需要它，您可以注入DOCUMENT内置令牌来获取document. 它具有defaultView当前window或null. 如果不是null，你可以得到它的宽度：

constructor(@Inject(DOCUMENT) {defaultView}: Document) {

  this.width = defaultView ? defaultView.innerWidth : 0;

}

Answer 3

simplay 你可以调用它 selft 的方法，因为你不使用事件对象所以

  ngOnInit() {

    console.log(this.width);

    this.onResize();

    console.log(this.width);

  }