1

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

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

父页面ngOnInit()订阅了一个 observable，它返回一个用户对象并设置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，因为我正在向组件传递一个“新”对象。我错过了什么？

4

2 回答 2

2

编辑

经过一番反复，Jordan 发现他有一个异步管道分配给用户变量，该变量覆盖了他对 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

于 2019-04-04T18:21:49.037 回答
0

我以前遇到过同样的问题，想知道是否有人知道如何解决。

我解决它的方法是在我的输入变量上使用 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;
  }
于 2019-04-04T17:32:10.617 回答