Angular2: dwukierunkowy wiązania wewnątrz elementu rodzica/dziecko

Question

Wersja: „angular2”: „2.0.0-beta.6”

Chciałbym zaimplementować dwie sposób wiązania wewnątrz komponentu przypadku rodzic/dziecko.

Na moim komponencie potomnym używam dwukierunkowego wiązania do wyświetlania tekstu podczas edycji.

komponent dziecko (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> 

Następnie chciałbym propagować tę zmianę jego składnika nadrzędnego. Próbowałem z [(name)]="name" bez powodzenia.

składnik nadrzędny:

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

Code sample

Co najprostszy sposób na to (mniej gadatliwy) zrobić?

Answer 1

dla 2-sposób wiązania użytku @Input() i @Output(). Nazwy powinny być propName i propNameChange aby umożliwić skrótów wiążące składni [(propName)]="someModel" inaczej należałoby dłuższą wersję [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

Trzeba użyć elementów wejścia/wyjścia w składniku dziecięcej, jak opisano poniżej:

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

Po wykryciu zmiany, trzeba zwolnić zdarzenie pomocą EventEmitter:

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

W ten sposób powiązany element komponentu nadrzędnego zostanie automatycznie zaktualizowany przy użyciu następującej składni:

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

Można zauważyć, że można wykorzystać, zdarzenie ngModelChange jeśli chcesz, aby wykryć zmianę wejścia zamiast używania formularz:

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