如何使用 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 的最大宽度。

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

...

clientWidth: number

initMethod() {
    this.clientWidth = (document.childNodes[1] as any).clientWidth;
}