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