子コンポーネントの角2 ngModelが親コンポーネントのプロパティを更新する

Question

2つのコンポーネント（親と子）で構成される単純なUIを作成しました。

子コンポーネントの入力ボックスにいくつかのものを入力したときのUIの機能です。値はngModelを使用して変更されます。

子コンポーネントは正常に動作します。

// Child Component 
@Component({ 
    selector: 'child', 
    template: ` 
     <p>{{sharedVar}}</p> 
     <input [(ngModel)]="sharedVar"> 
    ` 
}) 
export class ChildComponent { 
    sharedVar: string; 
} 

私は子コンポーネントと同じ値を使用するつもりです。

親テンプレートに子コンポーネントを追加し、依存コンポーネント注入を使用して子コンポーネントのsharedVarを呼び出しました。私は、入力ボックスに入力していますよう

// 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; 
    } 
} 

問題がある親コンポーネントの<h1>の値は変更されませんが、<p>の値が自動的に変更されます。

Answer 1

我々は、双方向のデータバインディングを達成するために、親テンプレートで[(x)]構文を使用することができます子供と一緒に。名前がxChangeのOutputプロパティを作成すると、Angularは自動的に親プロパティを更新します。私たちの子供がしかし、値を変更するたびにemit()にイベントを必要があります：私はちょうど名前が同じである必要はありませんことを実証するためにparentComponentにでsharedVarParentを使用

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

親と子。

Answer 2

イベントエミッタ通信（outputs）を子から親に設定できます。親コンポーネントで

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

と：：

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

    } 
} 

デモ：このようなたとえばhttp://plnkr.co/edit/T2KH4nGKPSy6GEvbF1Nb?p=info