代码之家 › 专栏 › 技术社区 › elfilado

基于信号值分配Observable

angular-signals signals angular

1

elfilado · 技术社区 · 1 年前

在我的应用程序中,我根据所选的菜单项声明电影列表(热门电影、即将上映的电影…)。我用一个 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信号声明我的电影$Observable?

readonly movies$: Observable<Movie[]> = ... ?

1 回复 | 直到 1 年前

1

2

Naren Murali 1 年前

使用将信号转换为可观测信号 toObservable 从…起 '@angular/core/rxjs-interop' ,然后用行为主体代替

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);
      })
);
...