Angular 5中如何正确订阅单例TimerService并重置定时器

嘿，作为Angular新手碰到这种服务订阅不更新的问题太正常了，我来帮你一步步理清问题并给出解决方案：

问题根源分析 #

你的代码里有两个核心问题：

1. TimerService不是真正的单例：默认的@Injectable()没有指定提供范围，可能导致不同组件注入的是服务的不同实例，所以AnotherComponent修改的定时器和AppComponent订阅的根本不是同一个。
2. 订阅无法响应定时器更新：你直接给timer属性赋值新的Observable.timer，但AppComponent订阅的是最初的那个Observable实例，新的Observable不会自动通知旧订阅者。

解决方案步骤 #

1. 将TimerService改为全局单例 #

Angular推荐用providedIn: 'root'创建全局单例服务，确保整个应用只有一个TimerService实例：

import { Injectable } from '@angular/core';
import { Observable, Subject, timer, Subscription } from 'rxjs';

@Injectable({
  providedIn: 'root' // 关键：指定服务在根注入器提供，确保全局单例
})
export class TimerService {
  private timerFinished$ = new Subject<void>(); // 用于通知订阅者定时器到期
  private currentTimerSubscription?: Subscription; // 保存当前定时器订阅，用于取消旧定时器

  constructor() { }

  setTimer(timerVal: number): void {
    // 先取消之前的定时器，避免多个定时器同时触发
    this.currentTimerSubscription?.unsubscribe();

    // 创建新定时器，到期时通知所有订阅者
    this.currentTimerSubscription = timer(timerVal).subscribe(() => {
      this.timerFinished$.next();
    });
  }

  // 暴露给组件订阅的Observable（隐藏Subject的next方法，避免外部随意触发）
  getTimerFinished(): Observable<void> {
    return this.timerFinished$.asObservable();
  }
}

2. 修改AppComponent的订阅逻辑 #

现在订阅服务暴露的timerFinished$ Observable，每次重置定时器都会收到新的到期通知：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { TimerService } from './timer.service';
import { Subscription } from 'rxjs';

export class AppComponent implements OnInit, OnDestroy{
  title = 'DataBox';
  private timerSubscription?: Subscription;

  constructor(private timerService: TimerService){}

  ngOnInit() {
    // 初始化3秒定时器
    this.timerService.setTimer(3000);
    
    // 订阅定时器到期事件
    this.timerSubscription = this.timerService.getTimerFinished().subscribe(() => {
      alert("hello");
    });
  }

  // 组件销毁时取消订阅，避免内存泄漏
  ngOnDestroy(): void {
    this.timerSubscription?.unsubscribe();
    this.currentTimerSubscription?.unsubscribe(); // 同时取消当前定时器
  }
}

3. 修改AnotherComponent的调用逻辑 #

现在调用setTimer就能正确重置全局定时器了：

import { Component, OnInit } from '@angular/core';
import { TimerService } from './timer.service';

export class AnotherComponent implements OnInit{
  constructor(private timerService: TimerService) { }

  ngOnInit() { }

  updateTimer() {
    // 重置为5秒定时器
    this.timerService.setTimer(5000);
  }
}

关键知识点解释 #

• 单例服务：providedIn: 'root'让Angular在根注入器中创建服务实例，所有组件注入的都是同一个实例，确保状态一致。
• Subject的作用：Subject相当于一个事件发射器，当新的定时器到期时，通过next()通知所有订阅者，解决了直接赋值Observable导致订阅不更新的问题。
• 取消旧订阅：每次设置新定时器前取消旧的订阅，避免多个定时器同时运行，防止重复触发提示。
• 组件销毁时清理：在ngOnDestroy中取消订阅，避免Angular应用出现内存泄漏。

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