7

angular2 以外の変数が変更されたときに監視および更新できるようにしたいと考えています。だから、私はこれを外部のjavascriptファイルに持っているとしましょう:

var test = 1;

この変数をコンポーネントのプロパティにバインドするにはどうすればよいですか?

@Component({
   ...
})

export class MyComponent {
    watchy = window.test;
}

この回答によると、どうやらこれはうまくいくはずです。
しかし、そうではありません。コンソールで変数を変更すると、テンプレートに表示される変数が更新されません。何か不足していますか？

4

3 に答える 3

19

Angular は、非同期で実行された関数が完了したときにのみ変更検出を実行します。angular が非同期操作を認識するためには、この関数を Angulars ゾーン内で実行する必要があります。

変数が Angulars ゾーンの外から変更されるためです。Angular は変更検出を実行しません。

Angular が変更された変数を認識するようにするには、手動で変更検出を呼び出す必要があります。Angular2 変更検出の手動トリガーも参照してください。

たとえば、変数を設定するだけでなくイベントをディスパッチできる場合は、イベントをリッスンできます。

window.dispatchEvent(new CustomEvent('test', {detail: 'newValue'}));

@Component({
   ...
})
export class MyComponent {
    @HostListener('window:test', ['$event'])
    testListener(event) {
      this.watchy = event.detail;
    }
}

呼び出されたイベント ハンドラーは自動的に Angulars の変更検出を呼び出すため、これ以上何もする必要はありません。

于 2016-04-25T04:37:44.503 に答える
3

this answerによると、どうやらこれはうまくいくはずです。

どのようにしてその結論に飛びついたのかはわかりませんが、コードにはもっと大きな問題があります。このコード行

watchy = window.test;

プリミティブ型のコンポーネント プロパティを作成します。そのコード行が実行watchyされると、値が割り当てられます1。 watchyはプリミティブであるため、割り当てが行われた後とは関係がありません。割り当ての値window.testのコピーを取得するだけです。window.testしたがって、その後 の値を変更するとwindow.test、JavaScript は を更新watchyしないため、Angular の変更検出はここでは考慮されません。

コンポーネント プロパティをグローバル変数にリンクする場合は、プリミティブ型をオブジェクト内にラップできます。

var myObj = { test: 1}

export class MyComponent {
  watchy = window.myObj;
}

watchyは参照型であり、オブジェクトを参照しますmyObj。オブジェクトのコピーを取得するのではなく、オブジェクトを「指す」だけです。したがって、 を変更するmyObj.testと、新しい値はまだオブジェクトを指しているため、watchy は新しい値を「見る」ことができmyObj.testます。ただし、Angular ゾーンの外で値を変更しても、Angular の変更検出は認識しません。

testコンポーネント テンプレートにの値を表示している場合test、変更検出を実行して変更を通知するには、Angular ゾーン内で変更する必要があります。ここで一連のコードを繰り返す代わりに、Angular 2 How to get Angular to detect changes made between Angular? を参照してください。

Günter の答えは別のアプローチです。Angular 内 (したがって Angular ゾーン内) にイベント リスナーを設定し、test変更があったときにそのイベントを発生させます。

于 2016-04-26T18:40:55.967 に答える