angular - 从 Angular 5 中的服务函数返回后，复杂的服务对象从组件更改

Question

进一步阐述我的问题，

我有一个名为 hero.service.ts 的服务，它被用在一个名为 hero.component.ts 的组件中。 hero.service.ts 包含一个变量 heros，它是一个 array 并且包含许多项。

我通过一个名为 getHeroes() 的函数从 hero.service.ts 获取 heros 的值，该函数将变量返回为 return this.heros; 并通过 this.heros = this.heroService.getHeroes() 获取组件上的值。

在我的组件中，表格中列出了英雄。 当我从表中删除行时，它实际上也从 hero.service.ts 的变量 heros 中删除。

• 为什么会这样？
• 为什么它返回变量引用而不只是一个值。

仅供引用，我通过使用 ... 传播运算符返回 heros 来实现它，例如 return [...this.heros];。但是为什么服务传递变量的引用。请大家帮忙。

Answer 1

在 JavaScript 中，像数组和对象这样的复杂数据类型是通过引用而不是值传递的。

当您从您的服务返回 this.heros; 时，您的组件没有获得 heroes 数组。它获得了对内存中英雄数组的引用。

所以基本上在这一点上，组件和服务中的 heroes 属性都指向内存中的同一个数组。

为了在您执行 return [...this.heros]; 时修复此问题，这次它将 heroes 数组的元素分散到一个动态创建的新数组中，然后将对该新创建的数组的引用返回给您的组件。

那时，组件 heroes 指向内存中的另一个数组。因此，当您这样做时，您会得到预期的结果，即英雄从组件数组中删除，而不是从服务数组中删除。

这是一个 StackBlitz供您引用。