Angular2: Zwei-Wege-Bindung innerhalb Eltern/Kind-Komponente

Question

Version: „angular2“: „2.0.0-beta.6“

Ich mag würde ein Zwei-Wege-Bindung innerhalb eines Eltern/Kind-Komponente Fall implementieren.

Bei meiner untergeordneten Komponente verwende ich eine bidirektionale Bindung, um Text während der Bearbeitung anzuzeigen.

Kinder Komponente (InputTestComponent [selector:'input-test']):

<form (ngSubmit)="onSubmit()" #testform="ngForm"> 
    {{name}} 
    <textarea #textarea [(ngModel)]="name" ngControl="name" name="name"></textarea> 
    <button type="submit">Go</button> 
</form> 

Dann würde Ich mag diese Änderung zu seiner übergeordneten Komponente propagieren. Ich versuchte mit [(name)]="name" ohne Erfolg.

Geordnete Komponente:

<div> 
    {{name}} 
    <input-test [(name)]="name"></input-test> 
</div> 

Code sample

Was ist der einfachste Weg, es zu tun (weniger ausführlich)?

Answer 1

für 2-Wege-Bindung Verwendung @Input() und @Output(). Die Namen sollten propName und propNameChange sein, die eine Abkürzung ermöglichen Syntax Bindung [(propName)]="someModel" sonst würden Sie [propName]="someModel" (propNameOtherOutputName)="propName=$event;propNameOtherOutputName.emit($event)"

@Component{ 
    ... 
    template: ` 
<textarea #textarea [(ngModel)]="name" (ngModelChange)="nameChange.emit($event)" ngControl="name" name="name"></textarea> 

`}) 
export class InputTestComponent { 
    @Output() nameChange:EventEmitter<String> = new EventEmitter<String>(); 
    @Input() name:string; 
} 

Answer 2

Sie benötigen Ein-/Ausgabeelemente in der Kind-Komponente zu verwenden, wie unten beschrieben:

@Component({ 
    selector:'input-test' 
    template: ` 
    <form (ngSubmit)="onSubmit()" #testform="ngForm"> 
    {{name}} 
     <textarea #textarea [(ngModel)]="name" ngControl="name" name="name"></textarea> 
     <button type="submit">Go</button> 
    </form> 
    ` 
}) 
export class InputTestComponent { 
    @Input() 
    name:string; 

    @Output() 
    nameChange:EventEmitter<string> = new EventEmitter(); 
} 

Wenn eine Änderung erkannt wird, müssen Sie ein Ereignis ausgelöst, mit dem EventEmitter:

onSubmit() { 
    this.nameChange.emit(this.name); 
} 

Auf diese Weise wird das gebundene Element der übergeordneten Komponente bei Verwendung der folgenden Syntax automatisch aktualisiert:

können Sie feststellen, dass Sie die ngModelChange Veranstaltung nutzen können, wenn Sie Eingabeänderung Vorlage anstelle von Form erkennen wollen:

@Component({ 
    selector:'input-test' 
    template: ` 
    <form #testform="ngForm"> 
    {{name}} 
     <textarea #textarea [ngModel]="name" (ngModelChange)="onChange($event)" ngControl="name" name="name"></textarea> 
    </form> 
    ` 
}) 
export class InputTestComponent { 
    @Input() 
    name:string; 

    @Output() 
    nameChange:EventEmitter<string> = new EventEmitter(); 

    onChange(newName) { 
    this.name = newName; 
    this.nameChange.emit(this.name); 
    } 
}