Angular4 复制对象而不引用？

Question

在组件内部，我尝试从服务复制一个对象，该对象可以在组件内部修改，但应该保留在服务中。

private test;

public ngOnInit(): {
  console.log(this.someService.test.someProperty) //'old'
  this.test = this.someService.test;

  //not working as well?!
  //this.test = Object.assign({}, this.someService.test);
  //this.test = Object.create(this.somerService.test);

  this.changeTest();
}

public changeTest(): void {
  this.test.someProperty = 'new';
}

在初始化之后，

this.test.someProperty

以及

this.someService.test.someProperty

都更改为

new

，即使最后一个应该保留

old

？

为什么会发生这种情况，以及如何仅更改

this.test

的属性

Answer 1

这是因为 Object.assign 是浅层合并，它只合并顶层，因此顶层在服务和组件中引用相同的对象。

当我需要深度合并对象时，我个人使用lodash的merge：

this.test = _.merge({}, this.someService.test)

另请参阅：如何深度合并而不是浅层合并？

您还可以使用以下方法深度克隆对象：

this.test = JSON.parse(JSON.stringify(this.someService.test));

另请参阅：如何在 javascript 中深度克隆

Answer 2

实际上对象分配的工作方式与您的示例相同。 创建了 plunker 来证明这一点

  this.test = Object.assign({}, this.someService.test);

您还可以深度克隆对象

  this.test = structuredClone(this.someService.test);

Answer 3

我个人更喜欢在类中添加克隆功能。它迭代对象字段并分配匹配的值。

export class Car {

    constructor(
        public id: number, 
        public name: String) { }

    clone(other : Car) : void {
        let k: keyof Car;
        for (k in other) {
            const v = other[k];
            (this[k] as (typeof v)) = v;
          }
    }
}

用途：

var car1 = new Car(1, "Amg");
var car2 = new Car(2, "205");
car1.clone(car2);