Angular 5：从子组件向父组件传递一个数组

Question

我有一个子组件和一个父组件。

我想从子组件传递一个数组，并在父组件中显示。

我首先开始于：

@Input data: string[];

然后在 ngOnInit 我有：

ngOnInit() {
   this.data = ['name1', 'name2', 'name3'];
}

然后我有父组件：

<app.parent></app.parent>

我的问题是：如何在父组件中显示这些数据？

Answer 1

您应该使用 @Output()，如下所示，

@Output() data: EventEmitter<string[]> = new EventEmitter<string[]>();

ngOnInit() {
   this.data.emit(['name1', 'name2', 'name3']);
}

您应该将 parent 中的事件处理为

<app.parent (data)="eventHandler($event)"></app.parent>

eventHandler(event:string[]){
     this.childData = event;
}

将组件中的 childData 显示为

{{childData}}

Angular 5: Passing an array from child to parent component