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

如果您使用 bootstrap，您可以使用 bootstrap CSS 媒体查询，

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

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

Answer 2

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

  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;

constructor(){
   this.initMethod();
}

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

这是另一种方法，而不是通过单独的

@Viewchild

或

@HostListener

访问来获取当前宽度