[解決済み] angular2でtypescriptを使用してデバイスの表示の高さと幅を取得する方法は?
2023-07-26 13:53:26
質問
このような解決策を見つけました。それは有効ですか?
import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';
@Component({...})
export MyApp {
constructor(platform: Platform) {
platform.ready().then((readySource) => {
console.log('Width: ' + platform.width());
console.log('Height: ' + platform.height());
});
}
}
このソリューションはionic 2用です。 Angular 2でも使用できますか?
正しい方法を教えてください。
どのように解決するのですか?
解決策が見つかりました。コンストラクタに以下のコードを記述してください。
import { Component, OnInit, OnDestroy, Input } from "@angular/core";
// Import this, and write at the top of your .ts file
import { HostListener } from "@angular/core";
@Component({
selector: "app-login",
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, OnDestroy {
// Declare height and width variables
scrHeight:any;
scrWidth:any;
@HostListener('window:resize', ['$event'])
getScreenSize(event?) {
this.scrHeight = window.innerHeight;
this.scrWidth = window.innerWidth;
console.log(this.scrHeight, this.scrWidth);
}
// Constructor
constructor() {
this.getScreenSize();
}
}
=================================== 動作コード(別) ========================================================================= 動作コード(別
export class Dashboard {
mobHeight: any;
mobWidth: any;
constructor(private router:Router, private http: Http){
this.mobHeight = (window.screen.height) + "px";
this.mobWidth = (window.screen.width) + "px";
console.log(this.mobHeight);
console.log(this.mobWidth)
}
}
関連
-
[解決済み】tsconfigファイルにおけるesModuleInteropの理解
-
[解決済み] Angular 2の「コンポーネント」は既知の要素ではありません。
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み】Angular / TypeScriptのプライベートメソッドのユニットテストをJasmineで記述する方法
-
[解決済み] Angular 2で入力タグのファイルタイプで選択されたファイルをリセットする方法は?
-
[解決済み] angular-cli が HTTPS で ng serve するようにする。
-
[解決済み] typescriptのインターフェイスを別ファイルで宣言しインポートする方法
-
[解決済み] ng-forOf」は既知のネイティブプロパティではないため、バインドできない [重複] 。
-
[解決済み] mat-selectでデフォルトのオプションを設定する
-
[解決済み] Angular 2のコンポーネントでTypeScriptを使ってモデルクラスを宣言するにはどうしたらいいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular 4でウィンドウサイズの変更をリアルタイムに検出する
-
[解決済み] formControlNameとFormControlの違いは何ですか?
-
[解決済み] 別のプロセス(id #######)が現在 ngcc を実行しています。
-
[解決済み] .tsファイルはTypeScriptのコンパイルの一部ですが、使用されていませんという警告を消すには?
-
[解決済み] dataSource' は 'table' の既知のプロパティではないので、バインドできません。
-
[解決済み] どのようにしてangular 4のurlからparamを取得するのですか?
-
[解決済み] の@ViewChildのreadパラメータは何ですか?
-
[解決済み] Typescriptで文字列をbooleanに変換する方法 Angular 4
-
[解決済み] ng-forOf」は既知のネイティブプロパティではないため、バインドできない [重複] 。
-
[解決済み] Angular 2+でspec.tsファイルなしでComponentを生成する。