如何在不重置的情况下显示所有角度页面的倒计时

Question

我有一个 10 分钟的计时器，我需要在我的有很多路由链接（页面）的 Angular 应用程序中显示它。我知道 Angular 是一页站点，但您可以使用路由浏览到不同的区域。既然这是真的，如何在主应用程序组件中显示所有路由链接的计时器，而不是每次进入不同的路由链接时都重置计时器？

定时器代码：

打字稿文件：

timer(minute) {
    // let minute = 1;
    let seconds: number = minute * 60;
    let textSec: any = "0";
    let statSec: number = 60;

const prefix = minute < 10 ? "0" : "";

const timer = setInterval(() => {
  seconds--;
  if (statSec != 0) statSec--;
  else statSec = 59;

  if (statSec < 10) {
    textSec = "0" + statSec;
  } else textSec = statSec;

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

  if (seconds == 0) {
    console.log("finished");
    clearInterval(timer);
  }
}, 1000);


}

html 文件：

{{display}}

如果我将其放在主应用程序组件中并尝试转到不同的路由链接，它将再次重置计时器，我不希望发生这种情况。让我们说主页是属性，第二个页面是联系人，如果我在两者之间切换，那么计时器会一次又一次地重置，我不希望这样。

Answer 1

我发现我可以将其放入应用程序模块中，然后在我的主页中添加以下内容：

if ((localStorage.getItem("theflag") === '2') && 
(sessionStorage.getItem("userName") !== null)) 
{ 
  localStorage.setItem('theflag', '1');
  location.reload();
}

这将重新加载页面一次，并且计时器将启动。注销时，我再次将值更改为 2，以便登录时再次变为 2：

    onlogout()
  {
    // if (!sessionStorage.getItem('foo')) { 
    //   sessionStorage.setItem('foo', 'no reload') 
    //   window.location.reload() 
    // } else {
    //   sessionStorage.removeItem('foo')
    // }
    localStorage.setItem('theflag', '2')