如何在父子组件之间进行双向数据流？（角度5）

Question

我有一个简单的代码示例，其中我尝试从父组件数据发送到子组件，并在数据将被更改时同时从子组件到父组件获取数据：

上级：

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  parentData:string = 'start value'

}
<app-child [childData]="parentData"></app-child>

儿童：

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childData: string;

}
<p>
    {{childData}}
    <br>
    <input [(ngModel)]="childData" type="text">
</p>

我需要注释@Output()， childData但已经用注释了@Input()。如何绑定变量childData和parentData？

Answer 1

如本文所述：

若要创建自己的支持双向绑定的组件，必须定义一个@Output属性以匹配一个@Input，但在其后缀Change。

您可以在此stackblitz中看到代码示例。

子组件：

<input [(ngModel)]="childData" type="text" (ngModelChange)="onModelChange($event)">

export class AppChildComponent {
  @Input() childData: string;
  @Output() childDataChange = new EventEmitter<string>();

  onModelChange(value: string) {
    this.childDataChange.emit(value);
  }
}

父组件：

<app-child [(childData)]="parentData"></app-child>