激活组件上的按钮并继续计数直到停止

Question

我正在尝试实现计时器。

我的问题是：我启动计时器，但是每当更改页面时，计时器都会重置/我必须再次启动它：（

目标是，当启动计时器时，它仅在单击暂停时才停止，如果我单击启动并可以更改页面，则计时器始终处于活动状态。

有人可以帮我吗？

我离开下面，我的示例的链接，计时器在服务选项卡中...当我切换到首页并返回服务以查看时间时，...已被禁用，我希望它始终保持活动状态] >

Stackblitz

html

<button (click)='startTimer()'>Start Timer</button>
<button (click)='pauseTimer()'>Pause</button>

<p>{{display}}</p> 
component.ts

startTimer() {
    this.interval = setInterval(() => {
        if (this.time === 0) {
            this.time++;
        } else {
            this.time++;
        }
        this.display = this.transform(this.time)
    }, 1000);
}

transform(value: number): string {
    var sec_num = value;
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    return hours + ':' + minutes + ':' + seconds;
}

pauseTimer() {
    clearInterval(this.interval);
}    

我正在尝试实现计时器。我的问题是：我启动了计时器，但是每当我更改页面时，计时器都会重置/我必须再次启动它：(目标是，在启动计时器时，它会...

Answer 1

发生这种情况的原因是，每次在路线之间切换时，组件都会被破坏。现在，当您再次导航到它时，将与组件的其他部分一起创建一个新计时器。

Answer 2

通过使用服务，您可以保留数据，直到刷新浏览器为止。我遍历了您的代码，并在services文件夹中添加了一项帮助服务。不要在服务（这意味着有角度的服务）和服务（您的组件服务）之间感到困惑。在离开服务组件之前，您需要更新角度服务中的两个变量。一个是计时器是否暂停，另一个是那一刻的计时器计数。我们可以在ngOnDestroy（）服务组件的生命周期挂钩中执行此操作。当我们回到服务组件，我们将从角度服务中获取过去的信息，并相应地显示计时器。