為什么 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}