如何按值将对象传递给 Angular2+ 组件

Question

假设我有一个组件，它接受一个Foo实例并显示一个表单来编辑它。

export class ChildComponent implements OnInit {
  @Input() foo : Foo;
  @Output() onChange : EventEmitter<Foo> = new EvenEmitter<Foo>();

  constructor() {
  }

  ngOnInit() {
  }
}

我把它嵌套ChildComponent在一个ParentComponent.

<div id="parent">
  <app-child-component [foo]="parentFoo"></app-child-component>
</div>

现在，即使我在这里使用了单向绑定，由于foo是一个对象并因此通过引用传递，对它所做的任何更改ChildComponent也反映在ParentComponent.

我怎样才能防止这种情况？有没有办法按值传递？任何最佳实践？

Answer 1

好的，到目前为止我最好的解决方案是这样的：

export class ChildComponent implements OnInit {
  private _foo : Foo;
  @Input()
  set foo(value : Foo) { this._foo = Object.create(value || null); }
  get foo() : Foo { return this._foo; }

  @Output() onChange : EventEmitter<Foo> = new EventEmitter<Foo>();

  constructor() {
  }

  ngOnInit() {
  }
}

这似乎确实有效，但是单个属性需要大量代码。我仍然不明白为什么 Angular 中没有内置这样的功能（例如@InputByValue装饰器）。

我认为当我希望更改从孩子反映到父母时，我会使用双向绑定[(foo)]="foo"。我在这里错过了什么吗？有什么理由不做我想做的事吗？