Typescript 子组件中的 Angular 2 ngModel 更新父组件属性

我们可以使用父模板中的[(x)]语法来实现与子模板的双向数据绑定.如果我们创建一个名为xChange的输出属性，Angular将自动更新父属性.我们确实需要在子元素更改值时创建一个事件，但是:

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

我在ParentComponent中使用了sharedVarParent，只是为了证明父级和子级中的名称不必相同.