Angular の変更検出 (Change Detection) メカニズムを理解する

関連チュートリアルの推奨事項: 「angular チュートリアル」

問題現象

開発プロセス中、トップページのデータが更新されないという問題が発生しました。フロントエンド ページは補間式を使用してバックグラウンド データ フィールドをバインドします。バックグラウンド インターフェイスが正常に呼び出された後、データ フィールドは変更されますが、現時点ではフロントエンド ページは自動的には更新されません。次のコードに示すように、これは補間式の非常に基本的な使用法であり、特別なことは何もありません。

<span class="info-box-number text-success">{{sumDataDto.thirdAll}}</span>

this.platformDataProxy.getSumData(input)
      .subscribe((result: SumDataDto) => {
        if (result) {
          this.sumDataDto = result;
        }
      });

---

問題の原因

この問題は、Angular - 変更検出の機能に関係しています。使用されるフレームワークは ABP フレームワークであり、フレームワークによって自動生成されたページには属性 changeDetection が追加されます。この属性は、現在のコンポーネントの変更検出戦略が OnPush であることを示します。

@Component({
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [appModuleAnimation()],
  changeDetection:ChangeDetectionStrategy.OnPush
})

変更検出戦略には 2 つのタイプがあります:

• デフォルト: Default 戦略はデフォルトの戦略です。値が変更される限り、 、コンポーネントとその子孫コンポーネントがチェックされます。

• OnPush: OnPushこの戦略では、入力データ (@Input) の参照が変更された場合、またはイベントがトリガーされる、変更検出。この戦略は完全ではありませんが、非常に効率的です。

---

#解放計画

オプション 1、この属性割り当てを直接削除
• オプション 2、手動で変更検出を実行

オプション 1 は非常に簡単で、コンポーネント内のこの変更検出戦略の代入ステートメントを直接削除します。このようにコンポーネントはデフォルトの戦略を採用しますが、効率が低くなるという欠点があります。

2 番目のオプションは、インターフェイスの呼び出しに成功した後、変更検出メカニズムのトリガー関数を手動で呼び出すことです。ここでは変更検出オブジェクトが使用されます。

最初に変更検出モジュールを導入します

import { ChangeDetectorRef } from “angular”;

次に変更検出オブジェクトを宣言します

constructor(private changeDetection:ChangeDetectorRef) {}

インターフェイス呼び出しが成功した後に変更検出メソッドを呼び出します

this.platformDataProxy.getSumData(input)
      .subscribe((result: SumDataDto) => {
        if (result) {
          this.sumDataDto = result;
          this.changeDetection.detectChanges();
        }
      });

これは少し面倒ですC# を手動で呼び出すゴミのリサイクル機構の匂い。

参考資料:

• https://links.jianshu.com/go?to=https://segmentfault.com/a/1190000010928087

#https://links.jianshu.com/go?to=https://www.cnblogs.com/lskzj/p/11143233.html
#プログラミング関連の知識について詳しくは、

プログラミング教育

をご覧ください。 ！

以上がAngular の変更検出 (Change Detection) メカニズムを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。