Question

在angular 4项目中，有这行代码this.config = { ...this.config }。经过一番检查，看来它没有改变this.config。但是删除该行会破坏this.config的更改检测。

这里是使用对象的组件

<dp-date-picker config="config"> </dp-date-picker>

这是唯一修改this.object

的功能

  private updateConfig(value, key) {
   if (!this.config) {
      this.config = {};
   }
   this.config[key] = value;
   this.config = { ...this.config }; // why does this work?
  }

有人可以解释this.config = { ...this.config }的作用吗？

Answer 1

创建对象时，将创建一个内存引用。将一个对象散布到另一个对象中会创建该对象的副本，但使用的是不同的内存引用。

让我们想象一下：

const obj = { id: 1, sub: { id: 11 } };
const copy = { ...obj };

console.log(obj === copy); // false
console.log(obj.sub === copy.sub); // true
console.log(obj.id === copy.id); // true

如您所见，两个对象没有相同的内存引用，但子对象却具有相同的内存引用，并且原始值作为值而不是作为引用进行比较。

这意味着编写

时

this.config = { ...this.config };

您实际上创建了一个新的内存引用，删除了前一个。

在Angular中，创建新的内存引用会触发更改检测。如果删除这段代码，则不会再发生任何事情，因为您将内存引用触摸到对象（子对象），而不是对象本身。

要触发更改检测，可以使用扩展或ChangeDetectorRef.prototype.detectChanges功能。

希望它能回答您的问题！

用省略号而不是点的对象属性：Object = {... Object}

1 个答案: