Angular2獲取窗口寬度onResize

試圖找出如何獲取調整Angular2中事件大小的窗口寬度。這裏是我的代碼：Angular2獲取窗口寬度onResize

export class SideNav { 

    innerWidth: number; 

    constructor(private window: Window){ 

     let getWindow = function(){ 
      return window.innerWidth; 
     }; 

     window.onresize = function() { 
      this.innerWidth = getWindow(); 
      console.log(getWindow()); 
     }; 
}

我使用提供獲得在我的應用程序訪問窗口全球進口窗口提供商在bootstrap.ts文件。我遇到的問題是，這給了我一個窗口大小，但在調整窗口大小時 - 即使窗口更改大小，它也會一遍又一遍地重複相同的大小。用於執行console.log例子中看到的圖像： Screenshot image

我的總體目標是能夠到窗口數量設置爲變量在onResize，所以我可以有機會獲得它在模板中。關於我在這裏做錯的任何想法？

謝謝！

來源

2016-02-20 Spencer Bigum

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

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

得到一個組件模板

或聽組件主機元素本身

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

來源

2016-02-20 18:56:49

何必當初你註釋掉了@Hostlistener？對我來說，它只能在沒有註釋斜槓的情況下運行，但是它可以很好地工作:-) –

它是一種替代方式。您可以將其添加到模板中的元素，如第一個代碼所示，或使用@HostListener（）來監聽組件主機元素本身。我更新了我的答案，使其更加清晰。 –

在這種情況下上滾動事件通知的子元素您需要手動運行更改檢測。當您從Angular的外部上下文修改組件變量時，基本上resize事件不會通過Angular2更改檢測系統修補猴子。

代碼

import {ChangeDetectorRef} from 'angular2/core' 

export class SideNav { 
    innerWidth: number; 

    constructor(private window: Window, private cdr: ChangeDetectorRef){ 

     let getWindow =() => { 
      return window.innerWidth; 
     }; 

     window.onresize =() => { 
      this.innerWidth = getWindow(); 
      this.cdr.detectChanges(); //running change detection manually 
     }; 
    } 
}

而是我想建議你去this answer，它看起來更清潔

來源

2016-02-20 19:04:10

這是有趣的瞭解changedetection - 但我很高興你指出我的Observable解決方案 - 我能夠以一個非常可重用的乾淨的方式添加一個新的服務全球窗口寬度和高度 - 所以謝謝你許多！ –

使用NgZone觸發變化檢測：

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

來源

2016-02-21 06:26:13 pixelbits

ngZone有趣的想法 - 我將不得不嘗試！目前使用可觀察的實現來自動檢測更改。 –

Angular2獲取窗口寬度onResize

回答

相關問題