angular - 如何在父组件和子组件之间进行双向数据流？ ( Angular 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>

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>

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

Answer 1

如 this article 中所述:

To create your own component that supports two-way binding, you must define an @Output property to match an @Input, but suffix it with Change.

您可以在 this 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>