父组件和子组件之间交换数据

Posted 2023-02-23

【中文标题】父组件和子组件之间交换数据

【英文标题】：Exchange data between parent component and child component

【发布时间】：2017-09-07 22:19:01

【问题描述】：

将对象数组从父组件传递到子组件（子组件将嵌套在父组件中）的最佳方式是什么？

将数组传递给子组件后，我必须对其进行处理以提取信息并显示在视图中（因此我必须在显示之前处理子组件中接收到的数据）。

【问题讨论】：

您是否在文档中阅读过whole page，或者在 SO 上寻找其他类似的问题？

为此使用@Input。请记住在父项中初始化数组（为空），以便在子标记中传递数组时不会未定义。由于您需要在显示之前处理孩子中的数组，因此可能需要在视图中使用安全导航运算符。作为旁注，请始终共享代码以澄清您的问题，以便能够获得一些体面的答案以及不会得到一堆反对票；）

完美，有效。如果我想传递多个对象？

@MaurizioRizzo 传递多个对象 - 你能详细说明一下吗？

【参考方案1】：

只需将其作为输入传递：

<child [data]="myArray"></child>

儿童班：

export class ChildComponent 
  @Input() data: any[];

这将使您能够通过this.data 访问ChildComponent 中的数据。要对数据更改做出反应，您可以使用 ngOnChanges 或使用 set 和 get 方法。

【讨论】：

我已经这样做了，但是在“ChildComponent”内部我无法在“date: any []”中访问

如果我尝试访问应用程序崩溃

@MaurizioRizzo 因为它是data，而不是你说的date。

如果您提供更多信息，我可以帮助您。

完美，有效。如果我想传递多个对象？