Question

我有一个父组件，'EmployeeComponent'，显示员工列表。我有一个子组件，'EmployeeDetailComponent'，显示所选员工的详细信息（姓名，电子邮件等）。

使用@Input将选定的员工从父项传递给子项，如下所示：

@Input() employee: Employee; // This line goes in the child component

子组件还允许编辑信息。编辑后，新的员工对象将使用偶数发射器传递给父组件，如下所示：

在子组件中：

@Output() onSaved = new EvenEmitter<Employee>();
onSubmit(){
    this.onSaved.emit(this.employee);
}

在父组件中：

onSaved(employee: Employee){

    // The line below doesn't affect employee's details in the view
    this.selectedEmployee = Object.assign({}, employee);

    // However, old values are successfully replaced by new ones
    console.log(this.selectedEmployee);

    //And the line below changes successfully the employee's details in the view
    this.employee.name = employee.name;

}

所以我的问题是，既然两种方式都改变了员工的详细信息，为什么第二种方式影响视图中的信息而不影响第一种信息呢？

Answer 1

Object.assign()返回相同的对象实例。角度变化检测仅在比较旧值和新值时检查对象标识，但不检查对象内容。

如果您有另一个对象，则Angular更改检测会将其视为更改，即使该对象包含具有相同值的相同属性也是如此。这会导致视图重新渲染。

为什么将对象的属性复制到另一个属性时手动更新视图而Object.assign（）没有？

1 个答案: