根据信号的值分配可观察对象

Question

在我的应用程序中，我根据所选的菜单项声明一个电影列表（热门电影、即将上映的电影...）。 我使用以下代码在服务中使用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);
  }

现在我正在尝试做同样的事情，但使用 menuItemSelected 信号而不是BehaviorSubject。

我做了以下更改：

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

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

我的问题是，如何根据该 menuItemSelected 信号声明我的 movie$ Observable ？

readonly movies$: Observable<Movie[]> =

...？

谢谢:)

Answer 1

使用 '@angular/core/rxjs-interop' 中的

toObservable

将信号转换为可观察的信号，然后将其替换为行为主体

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

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

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

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