Angular - 입력 매개변수를 가져와 처음에 올바르게 렌더링하는 하위 구성요소를 업데이트하는 방법

Question

나의 교육 경험은 다음과 같습니다:

으아악

다음 구성 요소는

으아악

매개변수에서 얻은 데이터를 표시하는 논리는 다음과 같습니다.

으아악

저는 업데이트를 처리하기 위해 맞춤 이벤트를 사용합니다

으아악

그런 다음 데이터를 조작하기 위한 다음 HTML이 있습니다.

으아악

그러나 필드의 업데이트된 데이터[value]="loadedEducation.school" (updatedValue)="loadedEducation.school = $event"는 하위 구성 요소에 바인딩되지 않으므로 새로 고치고 데이터베이스에서 데이터를 가져올 때까지 아무것도 표시되지 않습니다.

어떤 가능성을 구현해 볼 수 있나요?

ngOnChanges를 구현하려고 시도했지만 성공하지 못했습니다.

Answer 1

목록에 있는 항목의 속성을 변경해도 로드된 교육 목록은 변경되지 않습니다. 목록을 새로 고치거나(this.loadedEducations = returnedEducations) 프로젝트에서 상태 관리를 사용해 보세요

Answer 2

문제의 근본 원인은 @Input() 无法检测到对象和数组内部的更改，因为它们都是 引用类型。您的 education 属性是一个对象，因此在父组件中进行的直接改变属性的更改（例如 education.school = 'newValue' ）不会触发子组件的属性 @Input() education

의 변경입니다.

이 문제를 해결하는 방법에는 여러 가지가 있으며 각 방법에는 장단점이 있습니다.

---

필요한 속성만 기본 요소로 전달하세요

parent.component.ts

으아아아

parent.component.html

으아아아

child.component.ts

으아아아

장점:

• 사용이 간단하고 직관적이며 "정상적으로" 작동합니다
• 추가 상용구 없이 하위 구성 요소에 변경 사항 보내기

단점:

하위 구성 요소에 대한 변경 사항을
• 수신 하려면 추가 상용구가 필요합니다. 의 수가 늘어나면 다루기 힘들어집니다@Input
상위 구성 요소와 하위 구성 요소 사이의 의미적 결합을 잃게 되며 실제로는 공유 인터페이스(예:
• 인터페이스)에 바인딩됩니다. Education
속성이 참조 유형인 경우 확장이 잘 되지 않습니다. 이 경우 이러한 속성도 압축을 풀고 기본 형식으로 전달해야 합니다.

---

변경 시 상위 개체를 다시 빌드하세요

parent.component.ts 으아아아

딥 클론< /a>

parent.component.html 으아아아

child.component.ts 으아아아

장점:

상위 구성요소와 하위 구성요소 간의 의미적 결합을 유지하기 위해
• 인터페이스 사용을 유지Education
• 불변 객체 사용을 장려하세요일반적으로 객체에 대한 좋은 습관입니다
하위 구성 요소에 대한 변경 사항을
• 수신하기 위해 추가 상용구가 필요하지 않습니다.

단점:

하위 구성 요소에 변경 사항을

전송
• 하려면 추가 상용구가 필요합니다. 즉, 상위 구성 요소에 중복 기능 을 생성합니다. updateEducation()

반응 요소를

---

와 같은 하위 구성 요소에 전달하고 변경 사항을 직접 구독하세요

BehaviorSubject

으아아아 parent.component.ts

으아아아 parent.component.html

으아아아 child.component.ts

으아아아 child.component.html

장점:

• 이벤트 전송/구독을 완벽하게 제어할 수 있습니다. 이는 유발하려는 다른 부작용에 좋습니다
• 많은 구성 요소를 사용하도록 쉽게 확장할 수 있습니다. 예를 들어 educationSubject 서비스에 넣고 동일한 서비스를 필요한 모든 구성 요소에 주입할 수 있습니다.
또한
• 불변 객체 사용을 옹호합니다. < /里>하위 구성 요소
• 에 대한 변경 사항을 수신하는 데 추가 상용구가 필요하지 않습니다.

단점:

하위 구성 요소에 변경 사항을

전송
• 하려면 추가 상용구가 필요합니다. 즉, 상위 구성 요소에 중복 기능 을 생성합니다. updateEducation()스트림을 통해서만 변경, 구독 취소를 피해야 하는 필요성(
을 사용하지 않는 경우) 등과 같은 반응 코드 사용의 일반적인 제한 사항
• | async