コンポーネント内のHTML要素のstyle.displayの変更を検出するにはどうすればよいですか？

Question

レスポンシブルモバイルページのコンテキストでAngle 2とSCSSを学習しています。

私は、ブラウザのサイズを（メディアクエリによって）検出し、小さなデバイスが使用されているときに非表示にするためにいくつかの関連要素の表示プロパティを設定します。

そして、その変更が発生したときにコンポーネントに通知したいと思います。

どうすればよいですか？

Answer 1

Observable.fromEvent()を使用すると、DOMイベントを待機することができます。ウィンドウのresizeイベントをリッスンすると、ブラウザのウィンドウサイズが変更されるたびに通知されます。 Observable Observableは、サブスクリプション直後にウィンドウ幅と高さのプロパティをwとhに変更し、ウィンドウのサイズを変更するたびに再度オブジェクトを放出します。

windowSize$:Observable<{w:number,h:number}> = 
    Observable.fromEvent(window, 
         'resize', 
         ()=> {return {w:window.innerWidth, h:window.innerHeight}}) 
       //limits to one event every 500ms 
       .debounceTime(500) 
       //emit current value immediately 
       .startWith({w:window.innerWidth, h:window.innerHeight}); 

あなたは、ブラウザのサイズ（see this other question）を取得する代わりにdocument.documentElement.clientWidthか.clientHeightを使用する必要があります。ここで

は、この観測可能を使用する方法である：

windowSize$.subscribe(newSize => 
    console.log(`New: width=${newSize.w}, height=${newSize.h}`) 
)