Angular 2 ngModel in untergeordneten Komponente aktualisiert übergeordneten Komponente Eigenschaft

Question

Ich habe eine einfache Benutzeroberfläche, die aus zwei Komponenten (Eltern und Kind) bestehen.

Was die Benutzeroberfläche tut, ist, dass wenn ich einige Sachen in das Eingabefeld der Child-Komponente eintippe. Der Wert ändert sich mit ngModel.

Die Kindkomponente funktioniert auf diese Weise.

Jetzt habe ich eine Elternkomponente, die ich den gleichen Wert wie Child-Komponente verwenden möchte.

Ich habe die untergeordnete Komponente in die übergeordnete Vorlage eingefügt und die Abhängigkeitsinjektion verwendet, um die sharedVar der untergeordneten Komponente aufzurufen.

// Parent Component 
@Component({ 
    selector: 'parent', 
    template: ` 
     <h1>{{sharedVar}}</h1> 
     <child></child> 
    `, 
    directives: [ChildComponent], 
    providers: [ChildCompnent] 
}) 
export class ParentComponent { 
    sharedVar: string; 
    constructor(child: ChildComponent) { 
     this.sharedVar = child.sharedVar; 
    } 
} 

Das Problem ist, wie ich in das Eingabefeld tippen bin, wird der Wert in <p> ändert sich automatisch, während der Wert in <h1> der Mutterkomponente ändern sich nicht.

Answer 1

Wir können die [(x)] Syntax in der übergeordneten Vorlage verwenden Zwei-Wege-Datenbindung zu erreichen mit dem Kind. Wenn wir eine Output-Eigenschaft mit dem Namen xChange erstellen, aktualisiert Angular automatisch die Parent-Eigenschaft. Wir brauchen ein Ereignis emit(), wenn das Kind jedoch den Wert ändert:

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

@Component({ 
    selector: 'child', 
    template: ` 
     <p>Child sharedVar: {{sharedVar}}</p> 
     <input [ngModel]="sharedVar" (ngModelChange)="change($event)"> 
    ` 
}) 
export class ChildComponent { 
    @Input() sharedVar: string; 
    @Output() sharedVarChange = new EventEmitter(); 
    change(newValue) { 
     console.log('newvalue', newValue) 
     this.sharedVar = newValue; 
     this.sharedVarChange.emit(newValue); 
    } 
} 

@Component({ 
    selector: 'parent', 
    template: ` 
     <div>Parent sharedVarParent: {{sharedVarParent}}</div> 
     <child [(sharedVar)]="sharedVarParent"></child> 
    `, 
    directives: [ChildComponent] 
}) 
export class ParentComponent { 
    sharedVarParent ='hello'; 
    constructor() { console.clear(); } 
} 

Plunker

I sharedVarParent im Parent verwenden nur zeigen, dass die Namen müssen nicht gleich sein in das Elternteil und das Kind.

Answer 2

Sie könnten die Ereignis-Emitter-Kommunikation (outputs) von Kind zu Eltern einrichten. Zum Beispiel wie folgt aus:

@Component({ 
    selector: 'child', 
    template: ` 
     <p>Child: {{sharedVar}}</p> 
     <input [(ngModel)]="sharedVar" (ngModelChange)="change()"> 
    ` 
}) 
export class ChildComponent { 
    @Output() onChange = new EventEmitter(); 
    sharedVar: string; 
    change() { 
     this.onChange.emit({value: this.sharedVar}); 
    } 
} 

und die in Stammkomponente:

@Component({ 
    selector: 'parent', 
    template: ` 
     <h1>{{sharedVar}}</h1> 
     <child (onChange)="sharedVar = $event.value"></child> 
    `, 
    directives: [ChildComponent] 
}) 
export class ParentComponent { 
    sharedVar: string; 
    constructor() { 

    } 
} 

Demo:http://plnkr.co/edit/T2KH4nGKPSy6GEvbF1Nb?p=info