将组件中的数据同步回ionic 5中的调用页面

Question

在我的Ionic 5项目中，我创建了一个自定义组件，并从页面传递数据。

主页HTML:

<app-userItem [inUser]="user (outSync)="syncUser($event)"></app-userItem>

用户所在位置。

let user = {
Name: 'Test User',
Age: 23
}

现在，我希望如果在组件UserItem内部更改Age的值，它应该同步回主页用户变量中。这不是自动发生的。

为了实现这一点，我目前正在使用outSync事件发射方法。我的问题是，当我使用[]传递参数inUser的值时，用户变量不应该从两侧同步吗？

Answer 1

现在我想如果在组件UserItem内部我更改了Age的值，它应该同步回主页用户变量中。这不是自动发生的。

我认为它没有自动发生的原因是Angular比较对象标识以查看是否发生了更改，但在您的情况下，即使在更改user.age之后，user === user也是true，因为实例仍然相同。

这并不意味着对象没有更新——只是Angular不知道，因为据Angular所知，对象的实例是相同的，所以没有任何变化。

更好的方法是UserItemComponent只显示数据，而不直接更改数据(这将使其成为哑或表示组件(。

例如，如果该组件可以同时更改name和age属性，那么最好只通知父级应该更改这些属性，而更新user的是父级。

<app-userItem 
[inUser]="user 
(updateAge)="updateAge($event)"
(updateName)="updateName($event)"
></app-userItem>

然后父组件将修改数据，创建对象的新实例，以便子组件接收更新：

public updateAge(newAge: number): void {
this.user = {
...this.user,
age: newAge
};
}