グローバルイベント（window.onresize）はローカル変数の値を変更しませんでした

Question

グローバルイベント（window.onresize）はローカル変数の値を変更しませんでした。

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

Answer 1

私はthis.b = 10はそう、それは変数の値を変更しなかったことを見ることができますあなたのスクリーンショットから

ローカル変数の値を変更しませんでした。あなたもa: number = 0を参照してください絵で

。これは最後のブレークポイント以降の値aです。あなたの元のコードはありません

@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

：あなたはthis.aもホストバインディングを（これはAPIドキュメントに記載されている、deep inside the DirectiveMetadata page）を使用して、グローバルイベントに10

Answer 2

バインドで見ることができますあなた自身の関数にonresizeハンドラ（Angularがもともとは猿パッチされていた）をサルでパッチしたので動作しません。そのため、Angularでは、イベントハンドラの終了後に変更検出を実行する方法がなくなりました。ホストバインドを使用するとAngular monkey-patchがそのまま保持されるため、変更検出が無効になることはないため、サイズ変更イベントが発生するとビューが更新されます。

Answer 3

私はちょうど角度ゾーンで実行する更新コードを強制することによって同様の問題を解決しました。私が従ったドキュメントはhttps://angular.io/docs/js/latest/api/core/index/DirectiveMetadata-class.html（現在の今日の10/8/16）です。

このような何かが動作するはず

：

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

constructor(private _ngZone: NgZone) { 
} 

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

これは、この問題のMark Rajcok's答えよりも簡単であるが、しかし、NG2はまだ動く標的であるので、私が書いたものは疑いが行われた改善点の一つであります（たとえば、DirectiveMetadataへのリンクが存在しなくなりました）。