angular 4中多个标签页的注销计时器

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

@Injectable({
  providedIn: 'root'
})
export class TimerService {
  private timer: any;
  private logoutTime: number = 300000; // 5分钟

  constructor() { }

  startTimer() {
    this.timer = setTimeout(() => {
      // 执行注销逻辑
      this.logout();
    }, this.logoutTime);
  }

  resetTimer() {
    clearTimeout(this.timer);
    this.startTimer();
  }

  logout() {
    // 执行注销操作，例如清除用户登录状态、跳转到登录页面等
  }
}

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

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit {

  constructor(private timerService: TimerService) { }

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

  onTabChange() {
    this.timerService.resetTimer();
  }

}

<ul>
  <li (click)="onTabChange()">标签页1</li>
  <li (click)="onTabChange()">标签页2</li>
  <li (click)="onTabChange()">标签页3</li>
</ul>