使用Signal替代BehaviorSubject后，如何声明movies$ Observable？

我在应用里需要根据选中的菜单项（热门电影、即将上映电影等）获取电影列表，之前用服务里的BehaviorSubject实现，代码如下：

原组件代码 #

readonly movies$: Observable<Movie[]> = this.storeService.menuItemSelected$.pipe(
  switchMap(menuItem => {
    return menuItem === 'watchlist' ? this.movieService.getWatchlistMovies() 
      : this.movieService.getMoviesByCategory(menuItem);
  })
);

原服务代码 #

private readonly menuItemSelectedSource = new BehaviorSubject<Category>('now_playing');
readonly menuItemSelected$ = this.menuItemSelectedSource.asObservable();

updateMenuSelection(menuItem: Category): void {
  this.menuItemSelectedSource.next(menuItem);
}

现在我用Signal替代BehaviorSubject修改了服务代码：

menuItemSelected = signal<Category>('now_playing');

updateMenuSelection(menuItem: Category): void {
  this.menuItemSelected.set(menuItem);
}

现在想知道如何基于这个menuItemSelected Signal声明movies$ Observable，也就是readonly movies$: Observable<Movie[]> = 后面该写什么？

解决方案 #

可以使用Angular提供的toObservable()方法把Signal转换成Observable，之后就能沿用之前的switchMap逻辑处理：

readonly movies$: Observable<Movie[]> = toObservable(this.storeService.menuItemSelected).pipe(
  switchMap(menuItem => {
    return menuItem === 'watchlist' 
      ? this.movieService.getWatchlistMovies() 
      : this.movieService.getMoviesByCategory(menuItem);
  })
);

需要先导入toObservable工具函数：

import { toObservable } from '@angular/core/rxjs-interop';

toObservable()会将Signal的变化转化为Observable流，和原BehaviorSubject的行为完全一致：初始值会被立即发射，后续Signal更新时也会同步推送新值。

内容的提问来源于stack exchange，提问作者elfilado