更改对 Angular 模板中使用的 Observable 的引用？

Question

有没有办法更改 Angular 模板中使用的

Observable

的引用？

例如，假设我们在模板中有这个。

  {{ ( progress$ | async ) | date:'mm:ss'}}

我们想要更改

Observable

指向的

$progress

吗？

有办法做到吗？

我在 Stackblitz 中使用

setTimeout

尝试了一个简单的实验，它只是演示了我正在尝试做的事情。

https://stackblitz.com/edit/stackblitz-starters-qxxkg9?file=src%2Fmain.ts

更改引用的代码位于

ngOnInit

：

    setTimeout(() => {
      this.progress$ = of(0);
    }, 5000);

    setTimeout(() => {
      this.progress$ = interval(1000).pipe(map((c) => c * 1000));
    }, 8000);

progress$

的目的是报告歌曲已经播放了多长时间。如果播放

stop

，则

progress$

应为

0

...如果再次按下播放，则应重新启动计时器间隔 ...

也许正确的方法是通过函数流不断传输 Observable，将状态更改为应有的状态？

我尝试在 5 秒后更改此演示中的

pipe

流，但 Angular 连续渲染原始流...

  ngOnInit() {
    setTimeout(() => {
      this.progress$.pipe(map((c) => 0));
    }, 5000);

Answer 1

我更新了你的 stackBlitz。

https://stackblitz.com/edit/stackblitz-starters-qxxkg9?file=src%2Fmain.ts

要控制

observable

，您需要使用

BehaviorSubject

或

Subject

。这是我使用 

BehaviorSubject

 的代码。
这样，您可以在模板中维护单个订阅并通过主题推送更改。

export class App implements OnInit {
  private progressControl$ = new BehaviorSubject<'play' | 'stop'>('play');

  progress$!: Observable<number>;

  ngOnInit() {
    this.progress$ = this.progressControl$.pipe(
      switchMap((status) => {
        if (status === 'play') {
          return interval(1000).pipe(map((c) => c * 1000));
        } else {
          return of(0);
        }
      }),
      startWith(0)
    );

    setTimeout(() => {
      this.progressControl$.next('stop');
    }, 5000);

    setTimeout(() => {
      this.progressControl$.next('play');
    }, 8000);
  }

  name = 'Angular';
}