Globale Ereignisse (window.onresize) haben den Wert der lokalen Variablen nicht geändert.

Question

Globale Ereignisse (window.onresize) haben den Wert der lokalen Variablen nicht geändert.

export class TestComponent implements OnInit { 
 
    a: number = 0; 
 
    b: number = 0; 
 
    ngOnInit() { 
 
     window.onresize =() => { 
 
      this.a = 10; 
 
      this.b = 10; 
 
     }; 
 
    } 
 
}

Answer 1

der lokalen Variablenwert nicht

Von Ihrem Screenshot

ändern kann ich sehen, dass this.b = 10 so hat es den Variablenwert zu ändern.

In der Abbildung sehen Sie auch a: number = 0 sehen. Das ist nur der Wert von a seit dem letzten Haltepunkt. Sie können sehen, this.a auch 10

Answer 2

Bind auf globale Ereignisse ist mit Host-Bindung (dies in der API-Dokumentation erwähnt wird, deep inside the DirectiveMetadata page):

@Component({ 
    selector: 'my-app', 
    template: `<p>Resize window and look at console log. 
    <p>{{a}} {{b}}` 
}) 
export class AppComponent { 
    @HostListener('window:resize') onResize() { 
    this.a++; 
    this.b++; 
    console.log(this.a, this.b, event) 
    } 
} 

plunker

Ihre ursprüngliche Code tut nicht funktionieren, weil Sie den onresize Handler (der Angular hatte ursprünglich monkey-patched) zu Ihrer eigenen Funktion gepatcht. Angular hat also keine Möglichkeit, die Änderungserkennung nach Abschluss des Ereignishandlers auszuführen. Durch die Verwendung der Host-Bindung bleibt das Angular Monkey-Patch an Ort und Stelle. Daher wird die Änderungserkennung nicht deaktiviert. Daher wird Ihre Ansicht aktualisiert, nachdem das Resize-Ereignis ausgelöst wurde.

Answer 3

Ich habe gerade ein ähnliches Problem gelöst, indem ich den Update-Code gezwungen habe, in der Angular Zone zu laufen. Die Dokumentation, die ich befolgte, befindet sich unter https://angular.io/docs/js/latest/api/core/index/DirectiveMetadata-class.html (Stand: heute 08.10.16).

So etwas wie dies funktionieren sollte:

import {Component, OnInit, NgZone} from '@angular/core'; 

constructor(private _ngZone: NgZone) { 
} 

ngOnInit() { 
    window.onresize =() => { 
     this._ngZone.run(() => { 
      this.a = 10; 
      this.b = 10; 
     } 
    }; 
} 

Dies ist einfacher als Mark Rajcok's Antwort auf diese Frage ist jedoch NG2 ist immer noch ein sich bewegendes Ziel so kein Zweifel, was ich geschrieben habe, ist eine der Verbesserungen, die gemacht wurden (ZB der Link zu DirectiveMetadata existiert nicht mehr).