Angular 2 : two way binding inside parent/child component

Question

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

我想在父/子组件案例中实现双向绑定(bind)。

在我的子组件上，我使用双向绑定(bind)在编辑时显示文本。

子组件(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

最简单的方法是什么(不那么冗长)？

Answer 1

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

@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;
}