Angular2: legame a due vie all'interno componente padre/figlio

Question

Versione: "angular2": "2.0.0-beta.6"

vorrei realizzare un legame all'interno di una custodia componente genitore/figlio a doppio senso.

Sul componente figlio, sto usando il collegamento a due vie per visualizzare il testo durante la modifica.

componente figlio (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> 

Poi, vorrei diffondere questo cambiamento alla sua componente principale. Ho provato con [(name)]="name" senza successo.

componente principale:

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

Code sample

Quello che il modo più semplice per farlo (meno prolissa)?

Answer 1

Per 2 vie uso vincolante @Input() e @Output(). I nomi dovrebbero essere propName e propNameChange per consentire alla stenografia sintassi [(propName)]="someModel" vincolante altrimenti avresti bisogno la più lunga versione [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

è necessario utilizzare gli elementi di input/output nel componente figlio, come descritto di seguito:

@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(); 
} 

Quando viene rilevata una modifica, è necessario generare un evento utilizzando il EventEmitter:

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

In questo modo l'elemento associato del componente principale verrà automaticamente aggiornato quando si utilizza la seguente sintassi:

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

si può notare che è possibile sfruttare, l'evento ngModelChange se si vuole rilevare il cambiamento di ingresso, invece di utilizzare modulo di presentazione:

@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); 
    } 
}