ウィンドウサイズに基づく角度2のテンプレートの使用

Question

私のテンプレートには2つのdivがあります。 1つはテーブルビュー（ラップトップ）用、もう1つはリストビュー（モバイルビュー）用です。

私の.tsファイルでは、このサイズに基づいてngIfを使用して呼び出すdivを選択できるように、ウィンドウサイズを取得したいと考えています。 .TSファイルのコンストラクタで

、私が持っている：

let windowSize: number; 
this.windowSize = innerWidth + innerHeight; 
window.addEventListener("resize", function() { 
    this.windowSize = innerWidth + innerHeight"; 
}); 

しかし、私は（）this.windowSizeをCONSOLE.LOGとき、私は、ウィンドウのサイズが変更されたときの変化を得るいけません。私は何が欠けていますか？

Answer 1

はNgZoneを使用してこの問題を解決しました。私のコンストラクタでNgZoneを注入して、それを使用しました。これにより

window.onresize = (e) => 
{ 
    this.ngZone.run(() => { 
    this.width = window.innerWidth; 
    this.height = window.innerHeight; 
    }); 
}; 

、私は私のコンポーネントでは、ウィンドウの変化をチェックすることができました。私はウィンドウサイズの変更に基づいて私の.tsファイルの中でfuntionを実行しなければならなかったので、私はメディアクエリを使うことができませんでした。

Answer 2

これは簡単なCSSで設定することができます。

@media (min-width: 500px) and (max-width: 700px) { 
    .div1 { 
     display: none; 
    } 

@media (min-width: 701px) and (max-width: 900px) { 
    .div2 { 
     display: none; 
    }