कोणीय 2 विंडो चौड़ाई प्राप्त करें

Question

एंगुलर 2 में आकार बदलने वाली घटनाओं पर विंडो चौड़ाई कैसे प्राप्त करें, यह जानने का प्रयास कर रहा है।

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 को खिड़की संख्या निर्धारित करने के तो मैं टेम्पलेट में इस तक पहुंच हो सकती है सक्षम होने के लिए है। मैं यहां क्या गलत कर रहा हूं पर कोई विचार?

धन्यवाद!

Answer 1

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

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

एक घटक टेम्पलेट

या घटकों मेजबान तत्व में ही

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

Answer 2

इस मामले में पर सुनने में एक बच्चे तत्व पर स्क्रॉल ईवेंट पर सूचना पाने के लिए आपको मैन्युअल रूप से परिवर्तन पहचान को चलाने की आवश्यकता है। चूंकि आप कोणीय के बाहरी संदर्भ से घटक चर को संशोधित कर रहे हैं, मूल रूप से आकार बदलने का ईवेंट 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 के लिए जाने के लिए, जो अधिक क्लीनर लगता है कि आप सुझाव देना चाहते हैं

Answer 3

उपयोग NgZone परिवर्तन का पता लगाने को गति प्रदान करने:

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