时间戳

首页 > 解决方案 > 执行不同组件的功能

angular - 执行不同组件的功能

问题描述

我开发了一个带有按钮的网格，允许我激活或不激活计时器。

在网格所在的主页上，当启动计时器（单击开始）时，计时器开始计时。

通过一项服务，我可以查明计时器是否已激活，并更改导航栏组件上的按钮状态。

如何暂停组件/家庭服务的计时器（执行pauseTimer函数），但在导航栏组件中。基本上，当在家中启动计时器时，我打算使用停止按钮但在导航栏组件上暂停同一个计时器。

有人能帮我吗？

演示

代码

  startTimer(userId:string) {
    if (!this.timerForUsers[userId]) {
      this.timerForUsers = {
        ...this.timerForUsers,
        [userId]: {
          currentState: 'start',
          currentTime: 0,
          initialTime: 0,
          startTime: `${Date.now()}`
        }
      };
    }

    const currentUserTimer:TimerForUser = this.timerForUsers[userId];
    clearInterval(currentUserTimer.interval);
    currentUserTimer.startTime = `${Date.now()}`;
    currentUserTimer.initialTime = currentUserTimer.currentTime;

    currentUserTimer.interval = setInterval(() => {
      this.timerForUsers = {
        ...this.timerForUsers,
        [userId]: {
          ...this.timerForUsers[userId],
          currentTime: this.timerForUsers[userId].currentTime + 1 
        }
      };
    }, 1000);

    this.userID = userId;
    currentUserTimer.currentState = 'start';
     this.state = currentUserTimer.currentState;


    localStorage.setItem('user_timers', JSON.stringify(this.timerForUsers));
  }

  pauseTimer(userId:string) {
    const currentUserTimer:TimerForUser = this.timerForUsers[userId];

    currentUserTimer.currentState = 'pause';
    this.state = currentUserTimer.currentState;
    clearInterval(currentUserTimer.interval);
    currentUserTimer.interval = null;
    currentUserTimer.initialTime = currentUserTimer.currentTime;
    currentUserTimer.startTime = null;
    localStorage.setItem('user_timers', JSON.stringify(this.timerForUsers));
    currentUserTimer.currentTime = null;
  }

     gettimes() {
    return this.userID;
  }

    getCurrentState() {
    return this.state;
  }

标签： angulartypescript

解决方案

如果我理解正确，您想停止计时器并更改导航栏组件中的按钮。结帐演示 希望它有帮助

我已经添加了

public timerAction:ReplaySubject<any> = new ReplaySubject(1);
到任务服务

并在 HomeComponent

pauseTimer(data) {
     this.taskService.iduser = data.key.ID;
    this.taskService.pauseTimer(data.key.ID);
    this.taskService.timerAction.next(true);// added this
  }
在导航栏组件中

constructor(public taskService: TaskService) { 
    this.taskService.currentUserId.subscribe(x => {
      this.userId = x;
      this.startTimer();
    });
    
    // added this, a subscription that listens to change and triggers pausTimer if true.
    this.taskService.timerAction.subscribe(response =>{
      if(response)
        this.pauseTimer();
    })
  }

推荐阅读