typescript 对子组件中的对象所做的更改是否在父组件中可见?

2sbarzqh  于 2023-02-10  发布在  TypeScript
关注(0)|答案(4)|浏览(143)

将对象传递给子组件。〈child [model]=“parentModel”〉
更改子组件中对象的某个属性。此更改现在在父组件中可见吗?
据我所知,如果我们传递数字、字符串、布尔值,则不会反映更改,但如果传递对象,则更改应在父组件中可见(因为我们像传递引用一样传递它)

yzuktlbb

yzuktlbb1#

是的,我只是试了一下,我确实可以确认,在你的例子中,至少对于数组(但我看不出对于对象有什么不同),子组件可以更改model,并且更改将反映在父组件中。
现在,正如@Jai在注解中提到的,“正确”的方法是使用@Output装饰器。
我不知道使用您的方法是否会引起任何问题(除了代码可读性之外)。

euoag5mw

euoag5mw2#

在Angular 中,可以将对象作为属性传递给子组件。如果希望对子组件中的对象所做的更改反映在父组件中,则需要确保对象是可变的。
在Angular中,当你将一个对象作为输入传递给子组件时,传递的是对该对象的引用,而不是该对象的副本。因此,对子组件中的对象所做的任何更改都会反映在父组件中,因为它们修改的是同一个对象。

xqk2d5yq

xqk2d5yq3#

当你从parent传递一个引用类型值到child时,这意味着你的两个组件中的任何一个都可以使用相同的值。因此,它将使用你的引用值的所有更改。引用类型不仅可以是object,也可以是array结构。
另一个问题是parent组件如何知道何时重绘视图来显示值的变化,这个问题可以通过Angular中的变化检测系统来解决。
如果您的更改触发了parent组件中的事件,则无需担心-更改检测会自动完成所有操作。如果没有,则需要知道何时触发parent组件中ChangeDetectorRef服务的detectChanges方法。例如,可以使用子组件中的@Output装饰器来完成。或者,您甚至可以将带有选项SkipSelfChangeDetectorRef注入到child中,并在那里触发detectChanges方法,当对象发生变化时......有很多可能性可以解决这个问题。

gv8xihay

gv8xihay4#

是的,只要相同的引用和可变,你会得到parant组件中的更新值.
Playground:Parent-Child-Obj-Ref

相关问题