Angular - 将数据传递给父组件

Question

我的父组件中有这个：

 obj: any = { row1: [], row2: [], total: [], sumTotal: 0 };

我将 obj 传递给子组件：

<tr table-tr-tr *ngFor="let key1 of channels[name];let i=index" [key1]="key1" [data]="array" [field]="key1"
      [width]="width" [plantype]="plantype" [custom]="custom" [i]="i" [row]="row" [obj]="obj"></tr>
  </table>

在子组件中我有这个：

  ngOnInit() {
    for (let index = 0; index < this.data.length; index++) {
      this.array.push({ code: index, value: 0 });
    }
    this.obj['row2'][this.field] = this.array;

  }

在这个子组件中，我有另一个子组件，我在其中更改数组的值，但它在我的父对象上没有改变。有什么建议我怎么能做到这一点？

Answer 1

在这个子组件中，我有另一个子组件，我 改变数组的值，但它在我的父对象上没有改变。

在 Angular 中，父组件和子组件之间的数据流不是双向的。因此，您在子组件中所做的更改不会反映在父组件中。

您可以使用EventEmitter 将事件从子组件发送到父组件。

子组件：

在您的子组件中，声明一个EventEmitter 对象。

@Output() updateObjDataEvent: EventEmitter<any> = new EventEmitter<any>();

然后在子组件的任意位置使用emit方法向父组件发送数据。

// Update parent component data.
this.updateObjDataEvent.emit(obj);

父组件：

在你的父组件模板中，订阅这个事件：

<app-child-component-selector (updateObjDataEvent)="updateObj($event)">
</app-child-component-selector>

然后在你的父组件中，创建updateObj() 方法来处理来自子组件的数据更新。

updateObj(data) {
  // Do something.
}

在updateObj()方法中，可以更新父组件的数组对象。

Answer 2

您应该尝试使用服务将值从一个组件传递到另一个组件。 https://www.youtube.com/watch?v=69VeYoKzL6I