已解決430363個問題，去搜搜看，總會有你想問的

如何使用 Angular @HostListener onLoad 來獲取視口的當前寬度？

首頁猿問如何使用 Angular...

如何使用 Angular @HostListener onLoad 來獲取視口的當前寬度？

JavaScript

開心每一天1111 2022-01-20 18:46:44

我目前正在使用 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。

查看完整描述

3 回答

RISEBY

TA貢獻1856條經驗獲得超5個贊

如果您使用引導程序，則可以使用引導程序 CSS 媒體查詢，

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

否則，您嘗試的方法是正確的方法，而無需使用外部依賴項。

反對回復 2022-01-20

烙印99

TA貢獻1829條經驗獲得超13個贊

如果您在構造函數中需要它，您可以注入DOCUMENT內置令牌來獲取document. 它具有defaultView當前window或null. 如果不是null，你可以得到它的寬度：

constructor(@Inject(DOCUMENT) {defaultView}: Document) {

this.width = defaultView ? defaultView.innerWidth : 0;

}

反對回復 2022-01-20

HUH函數

TA貢獻1836條經驗獲得超4個贊

simplay 你可以調用它 selft 的方法，因為你不使用事件對象所以

ngOnInit() {

console.log(this.width);

this.onResize();

console.log(this.width);

}

反對回復 2022-01-20

3 回答
0 關注
326 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用 Angular @HostListener onLoad 來獲取視口的當前寬度？

如何使用 Angular @HostListener onLoad 來獲取視口的當前寬度？

3 回答

添加回答

如何使用 Angular @HostListener onLoad 來獲取視口的當前寬度？