Question

我有一个父页面，它将user数据传递给子组件，如下所示：

<ng-container *ngIf="leaderboard">
    <app-leaderboard-preview [user]="user" (click)="goToLeaderboard()"></app-leaderboard-preview>
</ng-container>

父页面ngOnInit()订阅了一个可观察对象，该对象返回一个用户对象并设置了user变量（我从combineLatest中删除了其他不相关的查询）：

combineLatest([this.userQuery$]).subscribe((results) => {
  Promise.all([this.parseUser(results[4])])
})

据我了解，除非创建新对象，否则ngOnChanges()不会触发，因此我将新用户对象分配为新对象，以使用app-leaderboard-preview传递给Object.assign()组件。

  parseUser(user) {
    return new Promise((resolve) => {
      if(user) {
        this.user = Object.assign({}, user);
        resolve(user);
      } else {
        resolve(user);
      }
    })
  }

这样可以很好地加载组件，但是用户的排名可以更改，因此当用户向下滑动以刷新页面时，应该更新该值，但是该组件不会更新。我使用以下代码（与上面几乎一样的副本）刷新页面（无需重新加载）。

  doRefresh(event) {
    if (this.user) {
      //user
      this.userQuery$ = this.db.query$(`user/find?id=${this.user.id}`);
      combineLatest([this.userQuery$]).subscribe((results) => {
        Promise.all([this.parseUser(results[4])])
      })
  }

然后运行parseUser方法来更新user使用的app-leaderboard-preview对象。

所以这应该触发ngOnChanges，因为我正在将“新”对象传递给组件。我想念什么？

Answer 1

修改

约旦来回弄清楚他有一个异步管道分配给用户变量，该变量覆盖了他对this.user的更改。

*ngIf = user$ | async as user

原始答案

Object.assign（{}，object）应该可以工作。在Angular 7上进行了测试。

this.user = Object.assign({}, user);

..或者如果您使用lodash，就可以。

this.user = _.clone(user);
this.user = _.cloneDeep(user);

https://lodash.com/docs/4.17.11#clone

https://lodash.com/docs/4.17.11#cloneDeep

Stackblitz演示： https://stackblitz.com/edit/ngonchangeswithobject

Answer 2

我之前也遇到过同样的问题，并且好奇是否有人知道如何解决。

我解决这个问题的方法是在我的输入变量上使用get（）set（）方法。这不是一个很好的解决方案，特别是如果您有多个输入变量。

  private _user: any;
  @Input()
  set user(value: any) {
    this._user = value;
    // run ngOnChanges stuff here
    this.ngOnChanges();
  }
  get user(): any {
    return this._user;
  }

尝试传递新对象时，不会触发ngOnChanges子方法

2 个答案: