角4：親コンポーネントの値を子コンポーネント内の変更された値で更新するにはどうしたらいいですか？

Question

プロパティの2方向バインディング0

Plunker

のApp

import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 

    <div class="app"> 
     Parent: {{ myValue }} 
     <myinput 
     [(zModel)]='myValue' 
     (zChange)='valueChanged($event)' 
     ></myinput> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
    myValue: string = 'Hello World'; 
    valueChanged(event) { 
    //alert('app: onchange (' + event + ")"); 
    this.myValue = event; 
    } 
} 

：それは私が持っているよう@outputイベントは、子コントローラに渡される必要があることを知っている親なし子コントローラから親コントローラであります

MyinputComponent

import { Component, EventEmitter, Input, Output } from '@angular/core'; 

@Component({ 
    selector: 'myinput', 
    template: ` 
     <hr> 
    <div > 
     Inside Component: <u>{{ zModel }}</u> <br/><br/> 
     <input type="text" 
      [(ngModel)]="zModel" 
      (input)="valueChanged($event)" 
      > 
    </div> 
    ` 
}) 
export class MyinputComponent { 
    @Input() 
    zModel: string = ''; 

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

    valueChanged(item){ 
    //alert('onchange (' + this.zModel + ')'); 
     this.zChange.emit(this.zModel); 
    } 
} 

Answer 1

によって余分な作業をしていない場合、あなたは親からのメソッドvalueChangedを削除することを意味します。

[(zModel)]='myValue' 

あなたはこの双方向の結合を達成するために、子供に変更する必要がある唯一のものは、実際にサフィックスを追加することです。その場合は、結合双方向をマークすることによって、正しい軌道に乗っていますChangeを変数の正確な名前に置き換えます。だからではなく、

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

のそれはあなたの@Inputとして

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

がzModelとしてマークされるべきです。

また、これはもちろん、子供に正しい変数名をマークする必要がありvalueChangedことを意味します

valueChanged(item){ 
    this.zModelChange.emit(this.zModel); 
} 

したがって、これらの変更後にあなたが親からvalueChangedを削除することができ、子タグはちょうどこのようになります。 ：

<myinput [(zModel)]='myValue'></myinput> 

ここにあなたの更新Plunkerです：http://plnkr.co/edit/eYx5wXnYauzqKXtduOvX?p=preview