为何Angular服务中的Observable定时器路由切换时会重置？

你遇到的核心问题是**timer是冷Observable**：冷Observable的特性是每次有新订阅时，都会重新执行内部的数据流逻辑。你的服务虽然是单例，但每次组件（包括用async管道）订阅timer$时，都会创建一个全新的定时器实例。路由切换后组件销毁再重建，会触发新的订阅，导致定时器从头开始计数。

方案一：将冷Observable转为热Observable #

通过shareReplay操作符，让所有订阅者共享同一个定时器数据流，新订阅还能获取之前的最新计数，避免重复创建定时器：

修改Service.ts：

import { Injectable } from '@angular/core';
import { timer, Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';

@Injectable({providedIn: "root"}) 
export class MinuteCounter{ 
  private timer$: Observable<number>; 

  constructor(){
    // shareReplay(1) 让所有订阅共享同一个定时器，且新订阅会拿到最近一次的发射值
    this.timer$ = timer(0, 60000).pipe(shareReplay(1));
  }

  public get timer(): Observable<number>{
    return this.timer$;
  }
}

组件代码无需修改，async管道和手动订阅都会共享同一个定时器实例，路由切换后返回会继续显示递增的数值。

方案二：服务内部维护计数状态 #

这种方式更直观，直接在服务里维护计数变量，自己启动定时器更新状态，再通过BehaviorSubject对外暴露当前计数：

修改Service.ts：

import { Injectable, OnDestroy } from '@angular/core';
import { timer, BehaviorSubject, Observable } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Injectable({providedIn: "root"}) 
export class MinuteCounter implements OnDestroy{ 
  // BehaviorSubject 会保存当前最新值，新订阅会立即拿到当前计数
  private countSubject = new BehaviorSubject<number>(0);
  public count$: Observable<number> = this.countSubject.asObservable();
  private destroy$ = new BehaviorSubject<void>(undefined);

  constructor(){
    // 延迟60秒后开始计数，之后每分钟递增1
    timer(60000, 60000).pipe(
      takeUntil(this.destroy$) // 服务销毁时清理订阅
    ).subscribe(() => {
      const currentCount = this.countSubject.value;
      this.countSubject.next(currentCount + 1);
    });
  }

  // 清理资源，避免内存泄漏
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
    this.countSubject.complete();
  }
}

然后修改组件代码：
Component.ts：

constructor(private minuteCounter : MinuteCounter){}
ngOnInit() { 
  this.minuteCounter.count$.subscribe(x => console.log(x));
}

Component.html：

{{ minuteCounter.count$ | async }}

这种方式的优势是可以更灵活地控制计数逻辑（比如重置、暂停计数等），同时状态完全由服务维护，组件只负责订阅展示。

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