☰

Angular 4でリアルタイムのウィンドウサイズの変更を検出する質問する

tag-icon • tag-icon html angular dom-events
Angular 4でリアルタイムのウィンドウサイズの変更を検出する質問する

レスポンシブなナビゲーション バーを構築しようとしていますが、メディア クエリは使用したくないので、*ngIfウィンドウ サイズを基準として使用しようと考えています。しかし、Angular 4 のウィンドウ サイズ検出に関する方法やドキュメントが見つからないため、問題が発生しています。JavaScript の方法も試しましたが、サポートされていません。

私も試してみました続く:

constructor(platform: Platform) {
    platform.ready().then((readySource) => {
        console.log('Width: ' + platform.width());
        console.log('Height: ' + platform.height());
    });
}

...これはイオンで使用されました。

そしてscreen.availHeight、まだ成功していません。

ベストアンサー1

初期化するには

public innerWidth: any;
ngOnInit() {
    this.innerWidth = window.innerWidth;
}

サイズ変更時に最新の状態に保ちたい場合:

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

おすすめ記事