javascript - 如何使用 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。

score 0 · Accepted Answer

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

constructor(@Inject(DOCUMENT) {defaultView}: Document) {
  this.width = defaultView ? defaultView.innerWidth : 0;
}

score 0 · Accepted Answer

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

  ngOnInit() {
    console.log(this.width);
    this.onResize();
    console.log(this.width);
  }

score 0 · Accepted Answer

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

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

3 回答 3