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

Question

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

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

直播

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。这意味着您正在与 parent 和 child 共享引用 object。这意味着对此 object 的任何更改都会导致 parent 和 child.

的更改

为了在 child 中进行不会影响您的 parent 的更改，请使用 Object.assign 函数创建 object 的深层副本并将其用于你的 child 组件。

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

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

Forked and edited example

Answer 2

来自 Reactive Forms - Step 2: Associating the FormGroup model and view 的 Angular 文档：

A form group tracks the status and changes for each of its controls, so if one of the controls changes, the parent control also emits a new status or value change.

Answer 3

您可以尝试以下表格：

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

Answer 4

一切都来了 Explaining Value vs. Reference in Javascript as well as Angular's Change Detection

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

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

或ES6方式：

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

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

Why angular2 one-way binding between components works wrong with objects?

javascript

angular

angular2-formbuilder

直播

父组件 JS

父组件HTML

子组件 JS

子组件HTML

问题