Question

我试图通过EventEmitter将更改从组件传播到其兄弟之一。更改是指数组中用户的状态。

这是我的代码：

child1.component.ts（来源）

@Output() adminAdded = new EventEmitter<Array<AdminDetails>>();
...
setAdminStatus(index: number, status: string): void {
  this.admins[index].status = status;
  this.adminAdded.emit(this.admins);
}

parent.component.ts

onAdminAdded(adminDetails: Array<AdminDetails>): void {
  Object.assign(this.adminDetails, adminDetails]);
}

parent.component.html

<child1-component (adminAdded)="onAdminAdded($event)"></child1-component>
<child2-component [admins]="adminDetails"></child2-component>

child2.component.ts

adminMails: string[];
@Input() set admins(admins: Array<AdminDetails>) {
    if (!admins) {
        return;
    }
    adminMails = admins.filter(x => x.status === 'Active').map(x => x.email);
}

在这里，我显示了活跃管理员的电子邮件。问题是更改只会到父组件。 Object.assign处的断点被击中，但在setter中，它没有被击中。

我认为这是因为对数组的引用是相同的，并且它没有识别出这种变化。有什么想法吗？

Answer 1

你是对的，Angular只在参考对象发生变化时才检测到变化，但在其内容发生变化时却不会检测到变化。

您可以通过在DoCheck生命周期钩子内移动逻辑来绕过这一点，该钩子能够检测对象属性的变化。

修改

正如所讨论的，如果你担心DoCheck被频繁调用，创建一个全新的对象并将其重新分配给你的输入属性应该可以解决问题，因为引用会有所不同。

带@Input的Angular5属性绑定数组

1 个答案: