为什么 angular2 组件之间的单向绑定对对象不起作用？

Question

我有父组件和子组件。
我想将表单的值从父组件发送到子组件。
子组件可以使用这些数据做任何事情，但所有更改都是本地的，不应返回给父组件。

当我向子组件发送一个简单的变量时- 一切正常，更改不会返回给父组件。
但是当我发送表单的值时- 所有更改都返回到父组件......

居住

https://stackblitz.com/edit/angular-dvqyjr

父组件 JS

export class AppComponent  {
constructor (private formBuilder: FormBuilder){};

simpleVariable = 'Value';
form: FormGroup = this.formBuilder.group({
    id: 1,
    name: 'Name'
});

父组件 HTML

<hello [simpleVariable]="simpleVariable" [form]="form.value"></hello>

子组件 JS

export class HelloComponent  {
  @Input() simpleVariable;
  @Input() form;
}

子组件 HTML

<input [(ngModel)]="simpleVariable">
<input [(ngModel)]="form.name">

题

那么如何将对象发送到子组件并修改它而不将数据返回给父组件？

Answer 1

这很简单。 这种行为的原因是form.value是一个对象。 这意味着您正在与父母和孩子共享一个参考对象。 这意味着对此对象的任何更改都将导致父项和子项的更改。

为了对子组件进行不影响父组件的更改，请使用Object.assign函数创建对象的深层副本，并在子组件中使用它。

export class HelloComponent implements OnInit {
  _from: {};
  @Input() simpleVariable;
  @Input() form;

  ngOnInit() {
    this._form = {};
    Object.assign(this._from, this.form);
  }
}

分叉和编辑的示例

Answer 2

来自Reactive Forms的 Angular 文档- 第 2 步：关联 FormGroup 模型和视图：

表单组跟踪其每个控件的状态和更改，因此如果其中一个控件发生更改，父控件也会发出新的状态或值更改。

Answer 3

您可以尝试使用以下表单：

<form [formGroup]="form">
  <input formControlName="name">
</form>

Answer 4

这一切都涉及在 Javascript 中解释值与引用以及Angular 的更改检测

总的来说，@benshabatnoam 已经回答了你的问题——为了执行更改检测——你需要通过老式的方式更改对象引用：

Object.assign(this._from, this.form);

或者 ES6 方式：

this._from = {...this.form}