如何使用 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) {&nbsp; this.width = defaultView ? defaultView.innerWidth : 0;}

Answer 3

simplay 你可以调用它 selft 的方法，因为你不使用事件对象所以&nbsp; ngOnInit() {&nbsp; &nbsp; console.log(this.width);&nbsp; &nbsp; this.onResize();&nbsp; &nbsp; console.log(this.width);&nbsp; }