2

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

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

ここに画像の説明を入力してください

4

3 に答える 3

1

ホスト バインディングを使用してグローバル イベントにバインドします (これは、DirectiveMetadata ページの奥深くにある API ドキュメントに記載されています)。

@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

onresize独自の関数に (Angular が最初にモンキー パッチを適用した) ハンドラーにモンキー パッチを適用したため、元のコードは機能しません。そのため、Angular には、イベント ハンドラーの終了後に変更検出を実行する方法がなくなりました。ホスト バインディングを使用すると、Angular のモンキー パッチが保持されるため、変更検出が無効になりません。そのため、サイズ変更イベントが発生した後にビューが更新されます。

于 2016-03-21T15:39:44.370 に答える
0

Angular Zone で更新コードを強制的に実行することで、同様の問題を解決しました。私が従ったドキュメントは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 の回答よりも簡単ですが、NG2 はまだ移動中のターゲットであるため、私が書いたことが改善の 1 つであることは間違いありません (たとえば、DirectiveMetadata へのリンクはもう存在しません)。

于 2016-08-10T04:02:05.993 に答える
0

ローカル変数の値を変更しませんでした

this.b = 10スクリーンショットから、変数値が変更されたことがわかります。

ここに画像の説明を入力

写真には も表示されますa: number = 0。aこれは、最後のブレークポイント以降のの値です。this.aあなたも見ることができます10

于 2016-03-21T04:55:11.970 に答える