Angularで変更検出をトリガーするためにmarkForCheck()を追加する必要があるのはなぜですか?

Martijn van den Bergh

変更を表示するために、以下のコードにmarkForCheck()を追加する必要がある理由がよくわかりません。@Input()が変更検出をトリガーしないのはなぜですか?

プロジェクトをOnPushにリファクタリングしています。これら2つのコンポーネントは両方ともOnPushが有効になっています。私が理解しているように、これが有効になっていて、Input()が変更されると(のようにmessages)、変更検出がトリガーされます。

以下のコードでは、を介して電話をかけますgraphqlService呼び出しを受信すると、着信データを解析してから、informationMessagesプロパティに設定cv-messagesmessagesます。プロパティはプロパティを介して子コンポーネントにバインドされます。

その結果ngOnChangesinformationMessagesプロパティが初期化されるときに、関数は1回だけ呼び出されます。ただし、最終的に解析されたデータがそれに設定されている場合はそうではありません。

markForCheck()を追加すると、正常に機能します。

次のようなテンプレートを使用して、この親コンポーネントについて考えてみます。

<cv-messages [messages]="informationMessages"></cv-messages>

そして、このコードを含むタイプスクリプトファイル:

informationMessages: InformationMessageType[] = [];

ngOnInit() {
    this.graphqlService.loadInformationMessages().subscribe(data => {
        const informationMessages: InformationMessageType[] = data;

        .... // parsing stuff

        this.informationMessages = informationMessages;
        // add markForCheck() here
    });
}

メッセージコンポーネントには、次のようなngOnChanges関数があります。

ngOnChanges(changes) {
    console.log(this.constructor.name ' CHANGE:', changes);
}

更新:

以下の回答のコメントで解決策を見つけることができます。基本的に、変更が非同期的に変更された場合、変更検出はトリガーされません@Input()したがって、その場合markForCheck()、変更検出を強制するためにを追加する必要があります。

ステップアップ

Angularドキュメントが言うように:

ビューがOnPush(checkOnce)変更検出戦略を使用する場合、ビューを変更済みとして明示的にマークして、再度チェックできるようにします。

通常、入力が変更されたとき、またはビューでイベントが発生したときに、コンポーネントはダーティ(再レンダリングが必要)としてマークされます。このメソッドを呼び出して、これらのトリガーが発生していなくてもコンポーネントがチェックされるようにします。

したがって、このメソッドは、コンポーネントをダーティとしてマークして再レンダリングするために必要です。

更新:

2つのタイプがありますChangeDetectionStrategy

OnPush:0 CheckOnceストラテジーを使用します。これは、ストラテジーをデフォルト(CheckAlways)に設定することにより、再アクティブ化されるまで自動変更検出が非アクティブ化されることを意味します変更検出は引き続き明示的に呼び出すことができます。この戦略はすべての子ディレクティブに適用され、オーバーライドすることはできません。

デフォルト:1デフォルトのCheckAlways戦略を使用します。この戦略では、明示的に非アクティブ化されるまで変更検出が自動的に行われます。

したがって、を使用するとOnPush自動変更検出が無効になり、ビューを変更済みとしてマークして、再度確認できるようにする必要があります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

angle8とjqueryでonclickイベントをトリガーするために2回クリックする必要があるのはなぜですか

分類Dev

期待どおりに機能するためにSIGINTを2回トリガーする必要があるのはなぜですか?

分類Dev

AngularのsubjectSubscriptionからデータを取得するためにページをリロードする必要があるのはなぜですか?

分類Dev

javascript:表示プロパティを変更するために2回クリックする必要があるのはなぜですか?

分類Dev

Equatableを機能させるために!=を追加する必要があるのはなぜですか?

分類Dev

FirebaseがAngular2で変更検出を繰り返しトリガーしないようにするにはどうすればよいですか?

分類Dev

forループで+1を収容するために、リストの長さに-1を含める必要があるのはなぜですか?

分類Dev

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

分類Dev

範囲で `find`を呼び出すために、範囲をミュートする必要があるのはなぜですか?

分類Dev

基本データ型の値を変更するために*を使用する必要があるのに、ユーザー定義の構造体の値を変更する必要がないのはなぜですか?

分類Dev

リストをsum()とマージするために空のリストを提供する必要があるのはなぜですか?

分類Dev

setTimeoutをリセットするためにclearTimeoutを2回呼び出す必要があるのはなぜですか

分類Dev

特性Numで2つの変数を追加するためにAddを実装する必要があるのはなぜですか?

分類Dev

ブラウザのサイズを変更すると、ナビゲーションメニューが消えるのはなぜですか。これを防ぐためにJqueryに何を追加する必要がありますか?

分類Dev

変更するために、一致で可変参照を逆参照する必要があるのはなぜですか?

分類Dev

2つの画像をブレンドするために最初の画像のサイズを変更する必要があるのはなぜですか?

分類Dev

デフォルトの変更検出戦略でdetectChanges()を呼び出す必要があるのはなぜですか?

分類Dev

WordPressサイトを表示するために数回更新する必要があるのはなぜですか?

分類Dev

変数を1行にエコーするためにbashが&&を必要とするのはなぜですか?

分類Dev

ファイルの名前を変更するために親ディレクトリで実行権限が必要なのはなぜですか

分類Dev

ループを使用するたびに変数を宣言する必要があるのはなぜですか?

分類Dev

CakePHPのセキュリティソルト値を変更する必要があるのはなぜですか?

分類Dev

'`'記号を取得するためにキーを4回押す必要があるのはなぜですか?

分類Dev

.shスクリプトを実行するためにプライベートbinフォルダーに変更する必要があるのはなぜですか?

分類Dev

SSDにOSをクリーンインストールするためにHDDを取り外す必要があるのはなぜですか?

分類Dev

ナビゲーションバーをページに表示するために「overflow:hidden」を追加する必要があるのはなぜですか?

分類Dev

ファイルを変更するためにUACが必要なのはなぜですか?

分類Dev

Springコントローラーのリクエストパラメーターを検証するために@Validatedが必要なのはなぜですか?

分類Dev

Read :: read_to_stringを呼び出すためにファイルを変更可能にする必要があるのはなぜですか?

Related 関連記事

  1. 1

    angle8とjqueryでonclickイベントをトリガーするために2回クリックする必要があるのはなぜですか

  2. 2

    期待どおりに機能するためにSIGINTを2回トリガーする必要があるのはなぜですか?

  3. 3

    AngularのsubjectSubscriptionからデータを取得するためにページをリロードする必要があるのはなぜですか?

  4. 4

    javascript:表示プロパティを変更するために2回クリックする必要があるのはなぜですか?

  5. 5

    Equatableを機能させるために!=を追加する必要があるのはなぜですか?

  6. 6

    FirebaseがAngular2で変更検出を繰り返しトリガーしないようにするにはどうすればよいですか?

  7. 7

    forループで+1を収容するために、リストの長さに-1を含める必要があるのはなぜですか?

  8. 8

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

  9. 9

    範囲で `find`を呼び出すために、範囲をミュートする必要があるのはなぜですか?

  10. 10

    基本データ型の値を変更するために*を使用する必要があるのに、ユーザー定義の構造体の値を変更する必要がないのはなぜですか?

  11. 11

    リストをsum()とマージするために空のリストを提供する必要があるのはなぜですか?

  12. 12

    setTimeoutをリセットするためにclearTimeoutを2回呼び出す必要があるのはなぜですか

  13. 13

    特性Numで2つの変数を追加するためにAddを実装する必要があるのはなぜですか?

  14. 14

    ブラウザのサイズを変更すると、ナビゲーションメニューが消えるのはなぜですか。これを防ぐためにJqueryに何を追加する必要がありますか?

  15. 15

    変更するために、一致で可変参照を逆参照する必要があるのはなぜですか?

  16. 16

    2つの画像をブレンドするために最初の画像のサイズを変更する必要があるのはなぜですか?

  17. 17

    デフォルトの変更検出戦略でdetectChanges()を呼び出す必要があるのはなぜですか?

  18. 18

    WordPressサイトを表示するために数回更新する必要があるのはなぜですか?

  19. 19

    変数を1行にエコーするためにbashが&&を必要とするのはなぜですか?

  20. 20

    ファイルの名前を変更するために親ディレクトリで実行権限が必要なのはなぜですか

  21. 21

    ループを使用するたびに変数を宣言する必要があるのはなぜですか?

  22. 22

    CakePHPのセキュリティソルト値を変更する必要があるのはなぜですか?

  23. 23

    '`'記号を取得するためにキーを4回押す必要があるのはなぜですか?

  24. 24

    .shスクリプトを実行するためにプライベートbinフォルダーに変更する必要があるのはなぜですか?

  25. 25

    SSDにOSをクリーンインストールするためにHDDを取り外す必要があるのはなぜですか?

  26. 26

    ナビゲーションバーをページに表示するために「overflow:hidden」を追加する必要があるのはなぜですか?

  27. 27

    ファイルを変更するためにUACが必要なのはなぜですか?

  28. 28

    Springコントローラーのリクエストパラメーターを検証するために@Validatedが必要なのはなぜですか?

  29. 29

    Read :: read_to_stringを呼び出すためにファイルを変更可能にする必要があるのはなぜですか?

ホットタグ

アーカイブ