Question

我想在我的一个Angular 4.3应用程序上运行时钟（Digital）。

我尝试了很多R＆amp; D，但没有成功。

也没有角度滴答时钟的参考。

所以我尝试添加基于java脚本的解决方案，但它也无法正常工作。

见下面的代码。

startTime() {    
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = this.checkTime(m);
  s = this.checkTime(s);   

  var t = setTimeout(this.startTime, 500);
  this.clock = commonSetting.formatedDate(h + ":" + m + ":" + s); // this is the variable that I am showing on the front end.    
}

checkTime(i) {
  if (i < 10) { i = "0" + i };  // add zero in front of numbers < 10
  return i;
}

我甚至不知道这是好习惯。

任何人都可以帮我这个吗？

Answer 1

早些时候，我所做的完全错了。

现在，我的实际情况有Dropdown，每次下拉更改事件，我都必须启动新时钟并且必须停止前一个。

然后，我跟着JB Nizet的评论，我使用下面的代码实现了运行时钟。

TypeScript代码

在导出类中定义了一个全局Date变量。

time: Date;

然后在下拉的Change方法中，我添加了我的解决方案。

//get current date time, you can set your own Date() over here
var stationdate = new Date(date_from_dropdown_change);

//clear Interval, it's my system requirement
if(this.prevNowPlaying) {
    clearInterval(this.prevNowPlaying);
}

// set clock and Interval
this.prevNowPlaying  = setInterval(() => {         
    stationdate = new Date(stationdate.setSeconds(stationdate.getSeconds() + 1));
    this.time = stationdate;
}, 1000);

现在， this.Time 将每秒更新一次。

HTML

<p class="localtime_p">{{ time | date:'MMM dd,yyyy HH:mm:ss'}}</p>

目前我发布这个答案时工作正常......

Answer 2

如果是我，我会使用Moment.js并在组件的constructor()中设置间隔函数，以便每秒更新clock属性。然后，您可以相应地在整个组件中显示时钟属性。

<强>组件

constructor() {
    // Runs the enclosed function on a set interval.
    setInterval(() => {
        this.clock = moment().format('MMMM Do YYYY, h:mm:ss a');
    }, 1000) // Updates the time every second.
}

或者，您可以将基本时间戳保存到组件中的属性，然后在前端使用管道，如Angular2-moment。我可能会选择这条路线，因为它可以在时钟属性方面提供更大的灵活性，以便能够在其他地方重复使用它而不会过多地处理格式。

Angular2 Moment Pipe

{{ clock | amLocale:'en' | amDateFormat:'MMMM Do YYYY, h:mm:ss a' }}

在Angular 4.3中运行时钟

2 个答案: