RxJS repeat与async管道在*ngIf中导致值重置为初始值的问题

*ngIf会根据条件销毁/重建内部视图：当condition从false切换为true时，内部的async管道会重新订阅watch$ Observable。而你当前的Observable每次被订阅都会从头执行整个管道逻辑，startWith(time)会立刻发射初始值，导致计时器重置。直接使用时订阅仅触发一次，所以状态能正常保留。

要让所有订阅者共享同一个数据流状态，需要将Observable转换为多播流，以下两种方法都能解决问题：

方法1：添加shareReplay操作符 #

在Observable管道末尾添加shareReplay(1)，让新订阅直接获取最近的发射值，而非重新触发整个流：

merge(
  this._start$,
  this._pause$
)
  .pipe(
    switchMap(val => (val ? interval(1000) : EMPTY)),
    map(() => -1),
    scan((acc: number, curr: number) => acc + curr, time),
    takeWhile(val => val >= 0),
    startWith(time),
    takeUntil(this._stop$),
    repeat(),
    tap(val => {
      if (val === 0) {
        this._finished$.next();
      }
    }),
    takeUntil(this._destroy$),
    shareReplay(1) // 新增：共享最近一次发射值
  );

方法2：用BehaviorSubject维护状态 #

如果需要更精细的状态控制，可通过BehaviorSubject保存当前计时器数值，原Observable仅负责更新这个Subject：

// 类内部定义BehaviorSubject保存状态
private _watchSubject = new BehaviorSubject<number>(time);
public watch$ = this._watchSubject.asObservable();

// 修改原管道逻辑，更新Subject而非直接返回流
merge(
  this._start$,
  this._pause$
)
  .pipe(
    switchMap(val => (val ? interval(1000) : EMPTY)),
    map(() => -1),
    scan((acc: number, curr: number) => acc + curr, time),
    takeWhile(val => val >= 0),
    startWith(time),
    takeUntil(this._stop$),
    repeat(),
    tap(val => {
      this._watchSubject.next(val); // 更新当前状态
      if (val === 0) {
        this._finished$.next();
      }
    }),
    takeUntil(this._destroy$)
  ).subscribe(); // 手动订阅触发流执行

这样无论*ngIf如何切换，async管道订阅watch$时都会拿到最新的状态值，不会重置。

• 使用shareReplay时，已有takeUntil(this._destroy$)可避免内存泄漏，无需额外处理。
• 使用BehaviorSubject时，需在组件销毁时调用this._watchSubject.complete()，配合takeUntil清理资源。

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