如何在Angular所有路由页面显示不重置的倒计时器

问题原因 #

你的计时器出现重复重置，核心问题是多次创建了定时器实例，或是没有正确管理定时器的运行状态：

• 若你在路由切换相关的钩子（如子组件的ngOnInit）中重复调用了timer()方法，会导致多个setInterval同时运行，互相覆盖display值，看起来像是计时器在重置
• 原代码未跟踪定时器是否已启动，也没有清理旧定时器的逻辑，多次调用会引发冲突

解决方案一：使用Angular单例服务（推荐） #

利用Angular服务的单例特性，将计时器逻辑封装在服务中，确保全局只有一个定时器实例，状态跨路由共享。

1. 创建计时器服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TimerService {
  // 用BehaviorSubject保存计时器显示状态，组件可订阅
  private displaySubject = new BehaviorSubject<string>('10:00');
  display$ = this.displaySubject.asObservable();
  
  private timerInterval: any;
  private isRunning = false;

  // 启动计时器，默认10分钟
  startTimer(minute: number = 10) {
    if (this.isRunning) return; // 避免重复启动
    this.isRunning = true;
    
    let totalSeconds = minute * 60;
    const prefix = minute < 10 ? '0' : '';

    this.timerInterval = setInterval(() => {
      totalSeconds--;
      const minutesLeft = Math.floor(totalSeconds / 60);
      const secondsLeft = totalSeconds % 60;
      const textSec = secondsLeft < 10 ? `0${secondsLeft}` : secondsLeft.toString();
      
      this.displaySubject.next(`${prefix}${minutesLeft}:${textSec}`);

      if (totalSeconds <= 0) {
        console.log('finished');
        this.clearTimer();
      }
    }, 1000);
  }

  // 清理定时器并重置状态
  clearTimer() {
    clearInterval(this.timerInterval);
    this.isRunning = false;
    this.displaySubject.next('10:00');
  }
}

2. 在App组件中使用服务

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

@Component({
  selector: 'app-root',
  template: `{{ display$ | async }}`,
})
export class AppComponent implements OnInit {
  // 订阅服务中的状态
  display$ = this.timerService.display$;

  constructor(private timerService: TimerService) {}

  ngOnInit() {
    // 仅在组件初始化时启动一次计时器
    this.timerService.startTimer(10);
  }
}

解决方案二：修复现有组件的定时器逻辑 #

若不想使用服务，可在App组件中添加状态跟踪，确保只创建一个定时器，并在组件销毁时清理。

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `{{ display }}`,
})
export class AppComponent implements OnInit, OnDestroy {
  display = '10:00';
  private timerInterval: any;
  private isTimerRunning = false;

  ngOnInit() {
    this.startTimer(10);
  }

  // 组件销毁时清理定时器（根组件一般不会销毁，但保留是好习惯）
  ngOnDestroy() {
    this.clearTimer();
  }

  startTimer(minute: number) {
    if (this.isTimerRunning) return; // 防止重复启动
    this.isTimerRunning = true;
    
    let seconds: number = minute * 60;
    let statSec: number = 60;
    const prefix = minute < 10 ? '0' : '';

    this.timerInterval = setInterval(() => {
      seconds--;
      statSec = statSec !== 0 ? statSec - 1 : 59;
      const textSec = statSec < 10 ? `0${statSec}` : statSec;

      this.display = `${prefix}${Math.floor(seconds / 60)}:${textSec}`;

      if (seconds === 0) {
        console.log('finished');
        this.clearTimer();
      }
    }, 1000);
  }

  clearTimer() {
    clearInterval(this.timerInterval);
    this.isTimerRunning = false;
    this.display = '10:00';
  }
}

解决方案三：使用RxJS响应式计时器 #

用RxJS的timer操作符替代原生setInterval，更符合Angular的响应式开发风格，自动管理订阅生命周期。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { timer, takeUntil, Subject } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `{{ display$ | async }}`,
})
export class AppComponent implements OnInit, OnDestroy {
  display$: Observable<string>;
  // 用于销毁订阅的信号
  private destroy$ = new Subject<void>();
  private totalSeconds = 10 * 60;

  ngOnInit() {
    this.display$ = timer(0, 1000).pipe(
      takeUntil(this.destroy$), // 组件销毁时停止订阅
      map(count => {
        const remainingSeconds = this.totalSeconds - count;
        if (remainingSeconds <= 0) {
          this.destroy$.next();
          console.log('finished');
          return '00:00';
        }
        const minutes = Math.floor(remainingSeconds / 60);
        const seconds = remainingSeconds % 60;
        return `${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
      })
    );
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

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