带有 @Input 的 Angular 属性绑定数组

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 被过于频繁地调用，创建一个全新的对象并将其重新分配给您的输入属性应该可以解决问题，因为引用会有所不同。