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

1u4esq0p 于 2023-01-18 发布在 TypeScript

关注(0)|答案(4)|浏览(170)

我目前使用Angular @HostListener来获取视口onResize()的当前宽度，如下所示：

@HostListener('window:resize', ['$event'])
  onResize(event?) {
    window.innerWidth <= 400 ? this.width = 200 : this.width = 400;
  }

但是我还需要一种方法来设置组件的这个.width onLoad()（在构造函数中，或者至少在ngOnInit()生命周期中）。
我还没有找到一种方法可以用HostListener来完成这个任务。有没有一种好的替代方法可以获得视口的当前宽度（在调整大小和加载时）并对其做出React？
我的目标是设置移动的视口大小的传单弹出窗口的最大宽度。

typescript

来源：https://stackoverflow.com/questions/59152865/how-to-use-the-angular-hostlistener-onload-to-get-the-current-width-of-the-view

4条答案

按热度按时间

m3eecexj1#

如果您使用 Bootstrap ，则可以使用 Bootstrap CSS媒体查询，
https://getbootstrap.com/docs/4.0/layout/overview/
否则，您所尝试的方法是正确的，无需使用外部依赖项。

赞(0）回复(0）举报 2023-01-18

3vpjnl9f2#

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

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

demo 🔥

赞(0）回复(0）举报 2023-01-18

rsaldnfx3#

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

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

赞(0）回复(0）举报 2023-01-18

idv4meu84#

...

clientWidth: number;

constructor(){
   this.initMethod();
}

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

这是另一种方法，而不是通过sepperate @Viewchild或@HostListener访问来获取当前宽度

赞(0）回复(0）举报 2023-01-18

我来回答

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

4条答案

相关问题

热门标签

最新问答