각도 2 아이 레벨 2의 양방향 바인딩을 구현하는 방법은 무엇입니까?

Question

객체는 상위 구성 요소

const public object = {value1: 'test1'};

의 한 속성입니다 그리고 그것은 하위 구성 요소에 대한 속성으로 사용되는

<app-child [(obj)]="object"></app-child>

아이 컴퍼넌트 자체가로 value1 필드 소요 다른 아이가 속성

<app-child-2 [(value)]="obj.value1"></app-child-2>

문제는 내가 두 번째 자식이나 내가 두 번째 자식으로 부모로부터 바인딩이 방법을 설정하는 방법 유일한 방법을 [(value)]을 사용할 수있다는

<app-child-2 [value]="obj.value1" (valueChange)="updateObjectFun()"></app-child-2>

updateObjectFun 설정 곳 일 아닌가요 objectChange 출력을 내 보냅니다.

Answer 1

하위 구성 요소에 올바른 '인터페이스'가있는 경우 양방향 바인딩 구문을 사용할 수 있습니다. 예를 들어 두 번째 하위 구성 요소의 입력 바인딩이 value이고 출력 바인딩이 valueChange 인 경우 양방향 바인딩 구문 인 [(value)]="obj.value1"을 사용할 수 있습니다.

양방향 결합 구가 정확히 동일하다 : $event이 성분의 valueChange 출력 특성으로부터 방출 목적

[value]="obj.value1" (valueChange)="obj.value1=$event" 

. 구성 요소의 인터페이스를 제어 할 수 있다면 (즉 원하는 속성을 만들 수 있음) 양방향 바인딩 구문을 자유롭게 활용할 수 있습니다.

ngModel은 바인딩하려는 구성 요소의 인터페이스를 제어 할 수 없으며 양방향 바인딩 구문 바로 가기를 사용할 수없는 경우에만 필요합니다.

(ngModel은 템플릿 기반 양식을 처리 할 때 추가 목적으로 사용되기 때문에 위의 문구는 완전히 사실이 아니지만 사용 사례는 문제가되지 않습니다.)