Angular2：父/子组件中的双向绑定

版本：“angular2”：“2.0.0-beta.6”

我想在父/子组件的情况下实现一个双向绑定.

在我的子组件上,我在编辑时使用双向绑定来显示文本.

子组件(InputTestComponent [selector：’input-test’])：

<form (ngSubmit)="onSubmit()" #testform="ngForm">
    {{name}}
    <textarea #textarea [(ngModel)]="name" ngControl="name" name="name"></textarea>
    <button type="submit">Go</button>
</form>

然后,我想把这个变化传播给他的父组件.
我尝试用[(name)] =“name”没有成功.

父组件：

<div>
  {{name}}
  <input-test [(name)]="name"></input-test>
</div>

Code sample

最简单的做法(较少冗长)？

对于双向绑定使用@Input()和@Output().名称应该是propName和propNameChange以允许速记绑定语法[(propName)] =“someModel”否则你需要更长的版本[propName] =“someModel”(propNameOtherOutputName)=“propName = $event; propNameOtherOutputName.emit ($事件)”

@Component{
  ...
  template: `
<textarea #textarea [(ngModel)]="name" (ngModelChange)="nameChange.emit($event)" ngControl="name" name="name"></textarea>

`})
export class InputTestComponent {
  @Output() nameChange:EventEmitter<String> = new EventEmitter<String>();
  @Input() name:string;
}

Angular2：父/子组件中的双向绑定

相关文章