각도 2 부모 자식 통신

Question

두 구성 요소 : RegistrationComponent 및 RegistryComponent가 있습니다.

RegistrationComponent :

@Component({ 
selector: 'registration_page', 
template: 
'<div> 
    <registry_form [model]="parentModel"></registry_form> 
    <label>{{parentModel}}</label> 
</div>, 
styleUrls: [...], 
directives: [...], 
providers: [] 
}) 
export class RegistrationComponent 
{ 
    parentModel : string; 

    constructor() 
    { 
     this.parentModel = "parent" 
    } 
} 

RegistryComponent :

@Component({ 
selector: 'registry_form', 
template: 
' 
    <label for="name">name {{model}}</label> 
    <input [(ngModel)]="model" required > 
', 
styleUrls: [...], 
directives: [...] 
}) 

export class RegistryFormComponent 
{ 
    @Input() model; 
} 

내가 RegistryComponent에 입력에 텍스트를 쓸 때 나는 변화를 볼 수 있지만 RegistrationComponent 마녀 상위 구성 요소입니다. 내가 뭘 놓치고있어?

Answer 1

룩은 :

<registry_form [model]="parentModel"></registry_form> 

[] 부분이 타입 바인딩 "입력"이 될 것을 의미한다.

<registry_form [(model)]="parentModel"></registry_form> 
       ^ ^

예를 수

1) 바인딩을 변경 : 당신은 두 가지 방법으로 가지 작업을 할 수 있습니다 "상자의 바나나". 이 모든 객체

@Component({ 
    selector: 'registry_form', 
    template: ` 
    <label for="name">name {{model}}</label> 
    <input [(ngModel)]="model" (ngModelChange)="modelChange.next($event)" required > 
    `, 
}) 
export class RegistryFormComponent { 
    @Input() model: any; 
    @Output() modelChange = new EventEmitter(); 
} 

2) name 특성을 가진 객체입니다 parentModel를 확인하고 통과 :

import {Component, Input, Output, EventEmitter} from '@angular/core' 

@Component({ 
    selector: 'registry_form', 
    template: ` 
    <label for="name">name {{model.name}}</label> 
    <input [(ngModel)]="model.name" required > 
    `, 
}) 
export class RegistryFormComponent { 
    @Input() model: any; 
} 

@Component({ 
    selector: 'registration_page', 
    template: ` 
    <div> 
     <registry_form [model]="parentModel"></registry_form> 
     <label>{{parentModel.name}}</label> 
    </div>`, 
    directives: [RegistryFormComponent], 
}) 
export class RegistrationComponent { 
    parentModel : any; 

    constructor() { 
     this.parentModel ={name:"parent"}; 
    } 
} 

당신이 또한 Output() modelChange 속성을 구현해야하므로 그러나 이것은 단지 "구문 당"입니다

Answer 2

일방적 인 바인딩이기 때문에. 자녀는 자체 범위가 있습니다. 아동의 변화가 자녀에게있을 때마다.

자녀가 변경 사항을 업데이트하고 부모에게 알릴 필요가있는 경우, 이벤트를 사용해야합니다. 이 코드