使用Subject或BehaviourSubject通过服务来提醒组件发生了什么事?

问题描述

在Angular 10应用程序上,我需要在组件之间发送消息,因此我创建了服务:

export class MemoService {

  private subject = new Subject<Memo>();

  send(code: MemoCode,data?: any) {
    this.subject.next(new Memo(code,data));
  }

  clear() {
    this.subject.next();
  }

  get(): Observable<Memo> {
    return this.subject.asObservable();
  }

}

在使用此服务的组件上,我有

  private memo: Subscription;

  private user: BehaviorSubject<User> = new BehaviorSubject<User>(null);


  constructor(private memoService: MemoService) { 

    this.getUser().subscribe((result: GetUserResponse) => this.user.next(result));

    this.memo = this.memoService.get().subscribe((memo: Memo) => { 

      if (memo.code == MemoCode.AuthenticatedUserModified) 
        this.getUser().subscribe((result: GetUserResponse) => this.user.next(result));

    });

  }

这个想法是当特定用户更新时,我使用Memo向其他组件发送MemoService

问题

我应该在组件和服务中同时使用Subject或BehaviorSubject吗?

解决方法

想法是当特定用户更新时,我会发送备忘录

我认为您可能会变得更加困难。您可能根本不需要“ MemoService”!

observables的想法是您可以订阅并始终自动拥有最新的价值。发生更改时,您对getUser()的订阅应该已经产生了更新的值。无需消耗组件即可重新发送值。

在这种情况下,唯一需要主题的地方就是您的UserService

export class UserService{

  private user = new BehaviorSubject<User>(undefined);
  public user$ = this.user.asObservable();

  setUser(user: User) {
    this.user.next(user);
  }

  updateUser(changes: Partial<User>) {
    const updatedUser = { ...this.user.value,...changes };
    this.user.next(updatedUser);
  }
}

然后,您的组件代码非常简单:

class SomeComponent {
  constructor(private userService: UserService) { }

  public user$ = this.userService.user$;
}

任何组件都可以调用userService.setUser(),所有感兴趣的组件都会自动接收更新后的值。

请注意,您甚至不需要订阅控制器,只需在模板中使用async管道即可。

<div *ngIf="user$ | async as user">
  <h1>Hello {{ user.name }}!</h1>
</div>
,

您试图做的似乎是状态管理,即管理组件之间的共享状态。如果是这种情况,我强烈建议您不要使用诸如服务和主题之类的手动解决方案,而应使用一些经过实践检验的状态管理库。一些好的是:

https://datorama.github.io/akita/

https://ngrx.io/

https://www.ngxs.io/