css - Angular2 खिड़की चौड़ाई RRize पर मिलता है




typescript angular2-directives (2)

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

export class SideNav {

    innerWidth: number;

    constructor(private window: Window){

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

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

मैं अपने ऐप में खिड़की पर पहुंच प्राप्त करने के लिए बूटस्ट्रैप.एस फाइल में वैश्विक रूप से विंडो प्रदाता आयात कर रहा हूं। मेरी समस्या यह है कि यह मुझे एक विंडो आकार देता है, लेकिन खिड़की का आकार बदलने पर - यह विंडो आकार बदलता है, भले ही यह आकार एक ही आकार को दोहराए। Console.log उदाहरण के लिए छवि देखें: स्क्रीनशॉट छवि

मेरा समग्र लक्ष्य विंडो नंबर को एक वेरिएबल ऑनरेज़ में सेट करने में सक्षम होना है ताकि मैं टेम्पलेट में इसका उपयोग कर सकूं। मैं यहां क्या गलत कर रहा हूं पर कोई विचार?

धन्यवाद!


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

इसके बजाय मैं आपको इस उत्तर के लिए जाने का सुझाव देना चाहता हूं, जो अधिक स्वच्छ दिखता है


परिवर्तन पहचान को ट्रिगर करने के लिए NgZone का उपयोग करें:

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




angular2-directives