Angular 2媒體查詢

我想知道Angular 2是否提供了一種方法來確定客戶端的設備（大屏幕，中等或小屏幕），或者可能是屏幕寬度的基礎上，可以顯示或隱藏一些內容從dom中刪除）。Angular 2媒體查詢

2016-06-28 Naveed Ahmed

HostListener

的一種方法是使用HostListener裝飾。當host元素髮出指定的事件時，將調用裝飾的方法。

@HostListener('window:resize', ['$event']) 
onResize(event) { 
    this.width = event.target.innerWidth; 
    this.height = event.target.innerHeight; 
}

通過ngZone

另一種方法是導入ngZone到組件。然後您可以使用NgZone來檢查onresize事件。

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

之後，你可以使用[hidden]屬性隱藏的內容從寬度或高度值依賴。

來源

2016-06-28 18:54:14 muetzerich

謝謝你這麼多馬克西米利使用。還有一個問題，使用NgZone是否會增加任何開銷或可能導致任何性能問題？ –

@NaveedAhmed我的理解是NgZone＃run可以在處理器中用於在角度變化檢測之外運行的某個異步進程。在這種情況下，我們想要對從Angular外部發出的'onresize'事件做出反應，所以爲了在角度變化檢測週期內對該事件作出反應，我們可以在窗口上爲該事件註冊一個監聽器並使用'run '安排要在角度區域內執行的處理。 TLDR，而如果您在該區域中執行了太多的邏輯要執行，則可能會出現性能問題，這個示例對我來說看起來不錯。 – Manningham

沒有必要使用NgZone。有更簡單的方法來捕獲調整大小窗口事件。

@HostListener('window:resize', ['$event']) 
onResize(event) { 
    const target = event.target; 
    this.width = target.innerWidth; 
    this.height = target.innerHeight; 
}

，或者如果你想如果從HTML

<div (window:resize)="onResize($event)" 

onResize(event) { 
    event.target.innerWidth; 
}

來源

2017-06-20 14:47:35

Angular 2媒體查詢

回答

相關問題