Angularで手動で変更検出をトリガーする

プロパティを持つAngularコンポーネントを書いていますMode(): string。

イベントに応答せずに、このプロパティをプログラムで設定できるようにしたいと思います。

問題は、ブラウザーイベント{{Mode}}がない場合、テンプレートバインディングが更新されないことです。

この変更検出を手動でトリガーする方法はありますか？

次のいずれかを試してください。

• ApplicationRef.tick()-AngularJSと同様$rootScope.$digest()-コンポーネントツリー全体をチェック
• NgZone.run(callback)-に似ています$rootScope.$apply(callback)-つまり、Angularゾーン内のコールバック関数を評価します。コールバック関数を実行した後、コンポーネントツリー全体をチェックすることになると思いますが、よくわかりません。
• ChangeDetectorRef.detectChanges()-に似ています$scope.$digest()-つまり、このコンポーネントとその子のみをチェックします

あなたは、注入することができApplicationRef、NgZoneまたはChangeDetectorRefあなたのコンポーネントに。

私は受け入れられた回答リファレンスを使用して例を挙げたいと思います。Angular2のドキュメントは非常に読みにくいので、これが簡単であることを願っています。

1. インポートNgZone：

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

2. クラスコンストラクターに追加します。

   constructor(public zone: NgZone, ...args){}
   

3. でコードを実行zone.run：

   this.zone.run(() => this.donations = donations)
   

markForCheck（）で更新できました

ChangeDetectorRefのインポート

import { ChangeDetectorRef } from '@angular/core';

注入してインスタンス化する

constructor(private ref: ChangeDetectorRef) { 
}

最後に、変更検出を実行するようにマークします

this.ref.markForCheck();

markForCheck（）が機能し、detectChanges（）が機能しない例を次に示します。

https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview

編集：この例では、問題はもう描かれていません:(修正された新しいAngularバージョンが実行されている可能性があります。

（STOP / RUNを押して再度実行します）

Angular 2+では、@ Inputデコレーターを試してください

これにより、親コンポーネントと子コンポーネントの間の適切なプロパティバインディングが可能になります。

最初に、親にグローバル変数を作成して、子に渡されるオブジェクト/プロパティを保持します。

次に、親から渡されたオブジェクト/プロパティを保持するために子にグローバル変数を作成します。

次に、子テンプレートが使用される親HTMLで、角括弧表記を子変数の名前で追加し、親変数の名前と同じに設定します。例：

<child-component-template [childVariable] = parentVariable>
</child-component-template>

最後に、子コンポーネントで子プロパティが定義されている場所に、Inputデコレータを追加します。

@Input()
public childVariable: any

親変数が更新されると、子コンポーネントに更新が渡され、HTMLが更新されます。

また、子コンポーネントで関数をトリガーするには、ngOnChangesをご覧ください。

ChangeDetectorRef.detectChanges（）-$ scope。$ digest（）と同様-つまり、このコンポーネントとその子のみをチェックします