如何檢測組件中HTML元素的style.display更改？

Question

我正在學習和使用angular 2和SCSS在響應式移動頁面的上下文中進行遊戲。

我有一個SCSS混搭檢測瀏覽器的大小（通過媒體查詢），它設置一些相關元素的顯示屬性，以便在使用小設備時隱藏它們。

我希望在發生更改時通知組件。

如何做到這一點？

Answer 1

您可以使用Observable.fromEvent()來偵聽任何DOM事件。通過收聽窗口的resize事件，每次瀏覽器窗口大小發生變化時都會通知您。下面的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}); 

您可能需要使用document.documentElement.clientWidth或.clientHeight，而不是讓瀏覽器的大小（see this other question）。

這裏是你將如何使用這個觀察到：

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