Angular2：親子コンポーネント内の双方向バインディング

Question

バージョン： "angular2"： "2.0.0-beta.6"

親子コンポーネントのケース内で双方向バインディングを実装したいと思います。

子コンポーネントでは、編集中にテキストを表示するために双方向バインディングを使用しています。

子コンポーネント（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> 

その後、私は彼の親コンポーネントにこの変更を伝播したいと思います。 [(name)]="name"で試してみましたが、成功しませんでした。

親コンポーネント：

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

Code sample

何が最も簡単な方法は、それを（あまり冗長）行うには？

Answer 1

を。あなたは `使用しているため名前は、そうでない場合は、あなたの最後のコードスニペットでは長いバージョン[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

あなたは以下に述べるように、子コンポーネントで入力/出力要素を使用する必要があります。

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

変更が検出された場合、あなたはEventEmitterを使用してイベントを発生する必要があります。

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

このようにして、次の構文を使用すると、親コンポーネントのバインドされた要素が自動的に更新されます。

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

あなたが代わりにフォームの送信使っての入力変化を検出したい場合は、ngModelChangeイベントを活用できることに気付くことができます：2ウェイ・バインディングを使用@Input()と@Output()については

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