1. ホーム
  2. html

[解決済み] Angular 4でウィンドウサイズの変更をリアルタイムに検出する

2022-04-24 21:23:58

質問

レスポンシブなナビバーを作ろうとしていますが、メディアクエリは使いたくないので *ngIf を、ウィンドウサイズを基準にして作成しました。 しかし、Angular 4のウィンドウサイズ検出に関するメソッドやドキュメントを見つけることができず、問題に直面しています。JavaScriptの方法も試しましたが、サポートされていません。

また 以下 :

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

...ionicで使用されていたものです。

そして screen.availHeight が、まだ成功しない。

どうすればいいですか?

初期化する場合

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

リサイズ時に更新されるようにしたい場合。

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