Angular：检查 Observable / BehaviorSubject 是否有相关变化

Question

我有一个在会员服务中观察到的用户对象。

我只想在用户对象发生相关更改时更新我的​​服务。

为了了解我的用户对象是否有相关变化，我将我的本地用户对象与观察到的用户对象进行比较。并且总是在之后分配新对象。

但是，这不起作用。

export class MemberService {
  private subscription?: Subscription;
  user?: User;

  constructor(public auth: AuthService) {
    this.subscription = this.auth.user$.subscribe((user) => {
      const updateServices = this.hasUserRelevantChanges(user)

      // apparently this line always fires before the functioncall above?!
      this.user = user;

      if (updateServices) {
         this.updateMyServices();
      }
    });
  }

  ngOnDestroy() {
    this.subscription?.unsubscribe();
  }

  hasUserRelevantChanges(user: User | undefined): boolean {
      return user?.subscription !== this.user?.subscription ||
          user?.username !== this.user?.username ||
          user?.isBanned !== this.user?.isBanned;
  }

  updateMyServices(): void {
    // Updating my services!!!
  }
}

export class AuthService {
  public readonly user$: Observable<User| undefined> = this.user.asObservable();
  user: BehaviorSubject<User| undefined> = new BehaviorSubject<User| undefined>(undefined);

    constructor(private httpHandler: HttpHandlerService) { ... }

  handleUser(): void {
    this.httpHandler.login().subscribe(
        (user: User) => this.user.next(user));
  }

  updateUserData(newUser: User): void {
    this.user.next(Object.assign(this.user.value, newUser));
  }
}

为什么我的函数hasUserRelevantChanges() 总是比较相同的新对象？本地的 this.user 总是在这个检查中保存新的值，即使分配 this.user = user 是在之后出现的？

那么，与旧的/以前的用户对象相比，我如何了解我的新 user 对象的相关值是否发生了变化？

Answer 1

“为什么我的函数 hasUserRelevantChanges() 总是比较相同的新对象？”

这是因为您总是将新值分配给 this.user 变量。理想情况下，您需要使用新的user 仅 更新它，如果它不同的话。换句话说，它必须移动到if 块内。

this.subscription = this.auth.user$.subscribe((user) => {
  const updateServices = this.hasUserRelevantChanges(user)

  if (updateServices) {
    this.user = user;
    this.updateMyServices();
  }
});

更新：pairwise + filter

在您的场景中，您最好使用 RxJS pairwise + filter 运算符来检查条件。

this.subscription = this.auth.user$.pipe(
  pairwise(),
  filter(([user1, user2]) => (
    user1?.subscription !== user2?.subscription ||
    user1?.username !== user2?.username ||
    user1?.isBanned !== user2?.isBanned;
  ))
).subscribe(([user1, user2]) => {    // <-- Update 2: ignore `user1`
  this.updateMyServices(user2);
);

如果您实际上是在将对象的所有属性与其之前的值进行比较，则可以将整个 pairwise + filter 替换为 distinctUntilChanged 运算符。

Answer 2

使用RxJs 运算符来执行此操作。您不需要将用户存储在代码中的某个位置，但您可以使用pipe 和pairwise 和filter。所以它会是这样的：

this.auth.user$.pipe(
           pairwise(), 
           filter(users => userChanged(users[0], users[1]))
           ... // other operators to handle change - tap, map etc
           )

如果你把逻辑移到合适的操作符上会更简洁。

编辑：Pairwise 返回两个值：previous 和 current，filter - 顾名思义，过滤事件并仅在传递的回调返回 true 时发出 next

Edit2：您应该实现 userChanged 或调整您的 hasUserRelevantChanges，现在您需要传递 2 个参数。

Edit3：为什么您的代码不起作用？因为Object.assign 不会创建新的对象引用而是更改原始对象 - 所以实际上，您每次都在检查同一个对象。

更新：传播运算符：

updateUserData(newUser: User): void {
this.user.next({...this.user.value, ...newUser});

}