Angular - 入力パラメータを受け取り、それを初めて正しくレンダリングする子コンポーネントを更新する方法

Question

私の学歴は次のとおりです:

リーリー

および次のコンポーネント

リーリー

パラメータから取得したデータを表示するための次のロジックがあります:

リーリー

カスタム イベントを使用して更新を処理します

リーリー

データを操作するための次の HTML があります:

リーリー

ただし、フィールド [value]="loadedEducation.school" (updatedValue)="loadedEducation.school = $event" の更新されたデータは子コンポーネントにバインドされないため、更新後はデータベースからデータを取得していない場合は、前に表示されます。

どのような可能性を実装できるでしょうか?

ngOnChanges を実装しようとしましたが、成功しませんでした。

Answer 1

loadedEducations リストは、リスト内の項目のプロパティを変更しても変更されません。リストを更新してみるか (this.loadedEducations = returnsEducations)、プロジェクトで状態管理

を使用してください。

Answer 2

問題の根本原因は、@Input() がオブジェクトと配列の内部の変更を検出できないことです。これらは両方とも 参照型 であるためです。 education プロパティはオブジェクトであるため、プロパティを直接変更する親コンポーネントでの変更 (例: education.school = 'newValue') は、子コンポーネントのプロパティをトリガーしません# Any ##@Input() 教育への変更

この問題を解決するにはいくつかの方法がありますが、それぞれに長所と短所があります。

---

必要なプロパティのみをプリミティブとして渡します

parent.component.ts リーリー

parent.component.html リーリー

child.component.ts リーリー ＃＃＃＃＃＃アドバンテージ：＃＃＃＃＃＃

シンプルで直感的に使用でき、「通常通り」動作します 変更を子コンポーネントに送信するための追加のボイラープレートは必要ありません

• 欠点:
子コンポーネントへの

変更を受信するには、追加のボイラープレートが必要です。

@Input の数が増えると、扱いにくくなります

親コンポーネントと子コンポーネント間のセマンティックな結合が失われ、実際には共有インターフェイス (つまり、

Education
• インターフェイス) によってバインドされます。 プロパティが参照型でもある場合、適切に拡張できません。この場合、これらのプロパティも解凍してプリミティブとして渡す必要があります
変更時に親内のオブジェクトを再構築する
• parent.component.ts
• リーリー

ディープクローン

---

parent.component.html リーリー

child.component.ts リーリー ＃＃＃＃＃＃アドバンテージ：＃＃＃＃＃＃

Education インターフェイスの使用を維持して、親コンポーネントと子コンポーネント間のセマンティック結合を維持します

不変オブジェクトの使用を奨励するこれはオブジェクトの一般的な推奨事項です

サブコンポーネントへの変更を受け取るために、追加のボイラープレートは必要ありません。

欠点:

変更を子コンポーネントに送信するには、追加のボイラープレートが必要です。つまり、親コンポーネントに冗長な
• updateEducation() 関数を作成します。
• BehaviorSubject などのリアクティブ要素をサブコンポーネントに渡し、変更を直接サブスクライブします

parent.component.ts リーリー

parent.component.html
• リーリー child.component.ts
リーリー

---

child.component.html

リーリー ＃＃＃＃＃＃アドバンテージ：＃＃＃＃＃＃

イベントの送信/サブスクリプションを完全に制御します。これは、誘発したい他の副作用に適しています。

educationSubject をサービスに配置し、それを必要とするコンポーネントに同じサービスを挿入するなど、多くのコンポーネントを使用するように簡単に拡張できます。

また、

不変オブジェクトの使用を推奨します

追加の定型文は必要ありません

サブコンポーネントへの変更を受信します

欠点:

• 変更を子コンポーネントに送信するには、追加のボイラープレートが必要です。つまり、親コンポーネントに冗長な updateEducation() 関数を作成します。 リアクティブ コードを使用する場合の一般的な制限 (ストリーム経由でのみ変更する、サブスクリプション解除を回避する必要がある (
| async
• を使用しない場合) など)。