[解決済み] 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;
}
関連
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] Flexbox:水平方向と垂直方向の中央揃え
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] Angularで@Input()の値が変更されたときに検出する方法は?
-
[解決済み] MIME-typeが原因でスタイルシートが読み込まれない
-
[解決済み] HTML5でminlengthの検証属性はありますか?
-
[解決済み】Angularウィンドウのリサイズイベント
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTMLとCSSによるテーブルスクロール [重複]について
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] CSSでテキストを垂直方向にセンタリングするには?[重複しています]
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?