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

我正试图在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;
    }

其中，

testString

是在包含字符串的

MyApp.ts

中定义的变量。当用户修改我的

inputText

时，我希望修改我的

testString

变量

下面是一个带有简单示例代码的Plunker：

有没有一种方法可以简单地实现这一点？我是否必须在自定义组件和重载函数上实现Angular2类，才能使其像

ngModel

一样工作？我是否必须创建

EventEmitter

类型的

inputExtChanged

变量，该变量在数据更改时发出数据，并执行以下操作：

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

---

提前谢谢。

您的插件已经包含了

事件发射器。缺少
@Output（）
注释。要更改值，请调用
inputExtChanged.emit（newValue）
（这也会更改
inputExt
）上的值）
如果将来有人在搜索，我将结合@pixelbits和@Günter Zöchbauer的答案和注释来明确回答我的问题

要使双向数据绑定在自定义变量上工作，您需要基于以下内容创建组件

mycop.ts文件：

import {Component,Input,Output,EventEmitter} from 'angular2/core'
@Component({
  selector:'my-comp',
  templateUrl:`<input type="text" style="text-align:center;"
     [ngModel]="inputText" (ngModelChange)="inputText=$event;inputTextChange.emit($event);">`
})

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

import{Component，Input，Output，EventEmitter}来自'angular2/core'
@组成部分({
选择器：'my-comp'，
模板URL:``
})
导出类MyComp{
@Input（）inputText:字符串；
@Output（）inputTextChange=新的EventEmitter（）；
}

MyApp.ts文件：

import {Component} from 'angular2/core'
import {MyComp} from './MyComp'

@Component({
  selector:'my-app',
  templateUrl:`<h1>Bidirectionnal Binding test </h1>
    <my-comp [(inputText)]="testString"></my-comp><p>
    <b>My Test String :</b> {{testString}}</p>`,
  directives:[MyComp]
})

export class MyApp{
  testString : string;
  constructor(){
    this.testString = "This is a test string";
  }
}

从'angular2/core'导入{Component}
从“/MyComp”导入{MyComp}
@组成部分({
选择器：'my-app'，
templateUrl:`双向绑定测试

我的测试字符串：{{testString}
`，
指令：[mycop]
})
导出类MyApp{
testString:string；
构造函数（）{
this.testString=“这是一个测试字符串”；
}
}

在那里，与
inputText
变量的双向数据绑定工作正常。
您可以对答案进行注释，以获得更漂亮或更简单的方法来实现此代码。
这将在模板语法文档的以下部分中进行解释：


在内部，Angular将术语
ngModel
映射到
ngModel
输入属性和
ngModelChange
输出属性。这是一个更通用模式的具体示例，其中它将
[（x）]
与属性绑定的
x
输入属性和事件绑定的
xChange
输出属性相匹配

我们可以编写自己的双向绑定指令/组件来遵循这种模式，如果我们有心情这样做的话

还请注意，
[（x）]
只是属性绑定和事件绑定的语法糖：

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

在你的情况下，你想要

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

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

inputTextChange.emit(newValue);


在您的场景中，MyComp组件使用
[（x）]
格式将输入属性
inputText
绑定到ngModel，因此您使用事件绑定
（ngModelChange）
来通知更改，并且在该事件处理程序中，您通知父组件更改

在其他不使用ngModel的场景中，重要的是每当MyComp组件中的属性值
inputText
发生更改时，
emit（）
一个事件。
我所做的是使用一个属性，因此当我更改数据时，更改会自动发出

private _data: AnyType;
@Input()  get data(): AnyType{
    return this._data;
}
set data(value: AnyType) {
    this._data = value;
    this.dataChange.emit(this._data);
}
@Output() dataChange: EventEmitter<AnyType> = new EventEmitter();

private\u数据：AnyType；
@Input（）获取数据（）：AnyType{
返回此。\u数据；
}
设置数据（值：AnyType）{
这个。_数据=值；
this.dataChange.emit（this.\u数据）；
}
@Output（）dataChange:EventEmitter=neweventemitter（）；

在html中，您将使用[（数据）]绑定属性


是的，您必须创建一个事件发射器“InputExtChanged”，并在组件内部触发事件。然后[（inputText）]应该按预期工作。注意：Angular2中没有双向数据绑定，但是您可以有类似的行为。根据官方网站上的Angular2备忘：“设置双向数据绑定。相当于：”。所以我认为我们可以说Angular2中存在双向数据绑定。@jornare，我认为你/Savkin和David都是正确的。我相信Savkin正试图说明Angualr2中没有处理双向数据绑定的代码。也就是说，
[（某物）]
只是一个属性绑定和一个事件绑定的语法糖。所以Angular并没有将
[（某物）]
视为一个双向数据绑定，而是将其视为两个单向数据绑定。是的，对不起，我是plunker的新手，忘记将plunker锁定到我希望您看到的状态，并继续对其进行测试，因此您看到了我的修改。我刚刚记得，我不知道您是否知道，但至少在Angular2的测试版中。next（）已弃用，您应该使用“.emit（）”。谢谢！更新Angular4：在子组件中，不再需要指定EventEmitter输出。这由@input自动处理。父视图：子组件：导出类MyComp{@Input（）inputText:string；}
inputTextChange.emit(newValue);

private _data: AnyType;
@Input()  get data(): AnyType{
    return this._data;
}
set data(value: AnyType) {
    this._data = value;
    this.dataChange.emit(this._data);
}
@Output() dataChange: EventEmitter<AnyType> = new EventEmitter();

<comp [(data)]="getData()"></comp>