组件输入属性上的双向数据绑定

我正在尝试在 angular2 上做一些事情，但我无法找到有关此行为的信息。

我有一个应用程序实现像这样的自定义组件：

import {Component,Input} from 'angular2/core'
    @Component({
      selector:'my-comp',
      template:`<input type="text" style="text-align:center; [(ngModel)]="inputText"> <p>{{inputText}}</p>`
    })

    export class MyComp{
      @Input() inputText : string;
    }

我正在尝试对我的设备进行双向数据绑定inputText我的组件中的变量如下所示：

<my-comp [(inputText)]="testString"></my-comp>

哪里的testString是定义在中的变量MyApp.ts其中包含一个字符串。我想要我的testString当我的变量被修改inputText由用户修改。

这是一个带有简单示例代码的 Plunker：https://plnkr.co/edit/zQiCQ3hxSSjCmhWJMJph?p=preview https://plnkr.co/edit/zQiCQ3hxSSjCmhWJMJph?p=preview

有没有办法让这个工作变得简单？我是否必须在自定义组件和重载函数上实现 Angular2 类才能使其像ngModel？我是否必须创建一个inputTextChanged的变量EventEmitter类型在更改时发出我的数据并执行如下操作：

<my-comp [inputText]="testString" (inputTextChanged)="testString = $event;"></my-comp>

先感谢您。

模板语法文档中对此进行了解释使用 NgModel 进行双向绑定 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel部分：

<input [(ngModel)]="currentHero.firstName">

在内部，Angular 映射了该术语，ngModel, to an ngModel输入属性和ngModelChange输出属性。这是它匹配的更通用模式的一个具体示例[(x)] to an x属性绑定的输入属性和xChange事件绑定的输出属性。

如果我们愿意的话，我们可以编写自己的遵循此模式的双向绑定指令/组件。

另请注意[(x)]只是属性绑定和事件绑定的语法糖：

[x]="someParentProperty" (xChange)="someParentProperty=$event"

在你的情况下，你想要

<my-comp [(inputText)]="testString"></my-comp>

所以你的组件必须有一个inputText输入属性和inputTextChange输出属性（这是一个EventEmitter).

export class MyComp {
  @Input()  inputText: string;
  @Output() inputTextChange: EventEmitter<string> = new EventEmitter();
}

每当您的组件更改值时，通知父级更改inputText，发出一个事件：

inputTextChange.emit(newValue);

在您的场景中，MyComp 组件绑定输入属性inputText使用[(x)]格式为 ngModel，因此您使用了事件绑定(ngModelChange)收到更改通知，并在该事件处理程序中通知父组件更改。

在其他不使用 ngModel 的场景中，重要的是emit()每当财产价值发生事件inputTextMyComp 组件中的更改。