为什么组件之间的 angular2 单向绑定对对象不起作用?
Why angular2 one-way binding between components works wrong with objects?
我有父组件和子组件。
我想将表单的值从父组件发送到子组件。
子组件可以使用这些数据做任何事情,但所有更改都是本地的,不应该返回给父组件。
当我向子组件发送一个简单的变量时 – 一切正常,更改不会返回给父组件。
但是当我发送表单的值时 – 所有更改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">
问题
那么如何将对象发送到子组件并修改它而不返回数据给父组件?
这很简单。这种行为的原因是 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);
}
}
来自 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.
您可以尝试以下表格:
<form [formGroup]="form">
<input formControlName="name">
</form>
一切都来了 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}
我有父组件和子组件。
我想将表单的值从父组件发送到子组件。
子组件可以使用这些数据做任何事情,但所有更改都是本地的,不应该返回给父组件。
当我向子组件发送一个简单的变量时 – 一切正常,更改不会返回给父组件。
但是当我发送表单的值时 – 所有更改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">
问题
那么如何将对象发送到子组件并修改它而不返回数据给父组件?
这很简单。这种行为的原因是 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);
}
}
来自 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.
您可以尝试以下表格:
<form [formGroup]="form">
<input formControlName="name">
</form>
一切都来了 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}