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

Question

私の教育経験は次のとおりです:<cdk-virtual-scroll-viewportitemSize="5"class="list-scroll"><app-education-item*ngFor="leteducationofloadedEducations"(isSelected)="changeSelected(

P粉658954914 · Answer

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

を使用してください。

P粉022723606 · Answer

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

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

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

parent.component.ts リーリー

parent.component.html リーリー

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

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

欠点:

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

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

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

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

ディープクローン

parent.component.html リーリー

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

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

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

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

欠点:

updateEducation() 関数を作成します。
BehaviorSubject などのリアクティブ要素をサブコンポーネントに渡し、変更を直接サブスクライブします

parent.component.ts リーリー

リーリー child.component.ts

child.component.html

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

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

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

また、

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

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

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

欠点:

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

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

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