Angular中的父子通信

14 浏览
0 Comments

Angular中的父子通信

我有两个问题:

  1. 如果我们从父组件向子组件发送任何变量,然后在子组件中进行任何更改(比如值的更改),这些更改会自动反映在父组件中吗?如果不会,我该如何反映回去?
  2. 我有一个演示,父组件向子组件发送一个数组(子组件具有添加/编辑功能)。每当我添加或更新任何元素时,更改也会反映在父组件中(我在父模板中显示列表)。

所以最初我认为我不需要关心将更改发送回父组件,因为它已经工作了。

然而,对于更新,我使用了两个变量editForm和edit_id,它们在更新时也由父组件发送到子组件,当我设置editForm = false和edit_id = 0时,父组件中的更改没有反映出来,只有子组件的变量发生了变化。

所以这两个问题现在让我感到困惑。

可能哪里出错了?以下是您可以找到我的代码的链接:

https://stackblitz.com/edit/angular-rw74sc

0
0 Comments

问题出现的原因是由于JavaScript中的赋值方式不同,对于基本类型(number、string等),传递的是值的副本,而对于对象,则传递的是引用的副本。因此,当子组件修改引用类型的值时,会影响到父组件中的相应对象。

解决这个问题的方法有很多种,例如可以使用Angular提供的一些机制来实现从子组件到父组件的通信,如输出属性(Output)、共享服务(Shared Service)、主题(Subject)和事件发射器(EventEmitter)等机制。

在上述代码示例中,可以看到引用类型和值类型的区别。当修改引用类型的值时,父对象也会受到影响,而修改值类型的值时,则不会影响到原始值。

另外,还可以通过一些相关的技术来解决子父组件之间的通信问题,可以参考附带的stackoverflow链接中的解答。

总结起来,解决Angular中子父组件通信问题的方法有很多种,开发者可以根据具体的需求和场景选择合适的方式来实现。

0