我试图在angular2上做一些工作,我无法找到关于这种行为的东西.

我有一个实现自定义组件的应用程序,如下所示:

import {Component,Input} from 'angular2/core'
    @Component({
      selector:'my-comp',
      template:` 
{{inputText}}
`
    })

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

我试图inputText从我的组件对我的变量进行双向数据绑定,如下所示:

其中testString是MyApp.ts包含字符串的变量.我希望在用户修改testString变量时inputText修改变量.

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

有没有办法简化这项工作？我是否必须在我的自定义组件和重载函数上实现Angular2类,以使其像ngModel？我是否必须创建一个类型的inputTextChanged变量,EventEmitter当它被更改时发出我的数据,并执行以下操作:

先感谢您.

这在模板语法文档中解释,在带有NgModel的双向绑定部分中:

在内部,Angular将术语映射ngModel到ngModel输入属性和ngModelChange输出属性.这是一个更一般的模式的一个特定示例,它匹配Property Binding [(x)]的x输入属性和xChangeEvent Binding 的输出属性.

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

还要注意,这[(x)]只是属性绑定和事件绑定的语法糖:

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

在你的情况下,你想要

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

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

要通知父级更改,只要组件更改了值inputText,就会发出一个事件:

inputTextChange.emit(newValue);

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

在不使用ngModel的其他场景中,重要的是emit()每当inputTextMyComp组件中属性值发生变化时的事件.

我将@pixelbits和@GünterZöchbauer的答案和评论结合起来,以便在我的问题上做出明确答案,如果将来有人正在搜索这个问题.

要使双向数据绑定适用于自定义变量,您需要根据以下内容创建组件.

MyComp.ts文件:

import {Component,Input,Output,EventEmitter} from 'angular2/core'
@Component({
  selector:'my-comp',
  templateUrl:``
})

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

MyApp.ts文件:

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

@Component({
  selector:'my-app',
  templateUrl:`
Bidirectionnal Binding test 
    

    My Test String : {{testString}}
`,
  directives:[MyComp]
})

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

在那里,与inputText变量的双向数据绑定正常工作.您可以对答案进行评论,以获得更美观或更简单的方法来实现此代码.