Angular 2 Eltern Kind Kommunikation

Question

Ich habe 2 Komponente: RegistrationComponent und 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; 
} 

Wenn ich einen Text in Eingabe in RegistryComponent schreiben kann ich Änderungen sehen, aber nicht in RegistrationComponent Hexe ist die übergeordnete Komponente. Was ich vermisse?

Answer 1

Blick auf diesen Code:

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

Der [] Teil bedeutet, dass dies ein "Input" Typ bindend. Sie können die Sache Arbeit auf 2 Arten machen:

1) Ändern Sie die Bindung

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

zum Beispiel zu sein, "Banane in der Box". Aber das ist nur ein „syntaktischer Zucker“, so würden Sie auch eine Output() modelChange Eigenschaft implementieren müssen:

@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) Machen Sie die parentModel ein Objekt mit einer name Eigenschaft, und übergeben dieses ganze Objekt:

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"}; 
    } 
} 

Answer 2

Weil es eine einseitige Bindung ist. Kind hat seinen eigenen Umfang. Wann immer Sie Änderungen am Kind vornehmen, bleiben Sie im Kind.

Wenn Kind die Änderungen aktualisieren und Eltern benachrichtigen müssen, müssen Ereignis verwenden.