Question

所以我有一个子组件，我通过了一个用户道具，如下所示：

 <user-profile-stage-five
    [User]="User"
    (goToStage)="changeSlide($event)"
  ></user-profile-stage-five>

另一个可以在父级中更新User属性的组件，如下所示：

  <user-profile-stage-zero
    [User]="User"
    (goToStage)="changeSlide($event)"
    (updateUserProfile)="onUpdateUserProfile($event)"
  ></user-profile-stage-zero>

这是父组件：

  public onUpdateUserProfile(user: User): void {
    this.User = user;
    console.log(this.User.profile);
    this.changeDetectorRef.detectChanges();
  }

但是User道具在子组件中没有更改：

  ngOnChanges(changes: SimpleChanges) {
    console.log('stage 5 changes: ', changes); // not being triggered when User changes in parent 
  }

我真的不明白为什么用户道具在子组件中没有变化，感谢任何帮助。

Answer 1

您需要创建一个不可变的对象才能触发角度变化检测。

public onUpdateUserProfile(user: User): void {
    this.User = {...user};
    console.log(this.User.profile);
    this.changeDetectorRef.detectChanges();
  }

Answer 2

事实证明，我的User属性在子组件中未更改的原因与我访问User属性的方式有关。以前我像

一样访问它

this.profileProvider.getUserProfile(this.userId)
   .get()
   .then(res => {
      this.User = res.data() as User;
});

但是，这似乎是用户的静态副本。我更改为以下内容：

this.user$ = this.getUser();

public getUser(): Observable<User> {
    return this.profileProvider.getUser();
}

// profile provider

    this.user$ = this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
          return null;
        }
      }),
    );

  // returns user as an observable
  getUser(): Observable<User> {
    return this.user$;
  }

然后我使用异步管道将user $属性传递给子组件。

父属性更改时未触发Angular ngOnChanges

2 个答案: