在Angular 4.3中運行時鐘

我想在我的Angular 4.3應用程序之一上運行一個時鐘（數字）。在Angular 4.3中運行時鐘

我嘗試了很多R & 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; 
}

我甚至不知道這是很好的做法與否。

任何人都可以幫助我嗎？

來源

2017-09-19 Bharat

所以，很多R＆d後，你結束了0線碼？發佈你的嘗試。解釋具體問題是什麼。 –

http://plnkr.co/edit/WquOVVmcDgAJQ9sO0uGc?p=preview –

@JBNizet：非常感謝這位朋友，但是沒有其他辦法可以解決這個問題，因爲我也需要對它進行大量的修改。 – Bharat

此前我所做的是完全錯誤的。

現在，我的實際場景有下拉和每個下拉更改事件，我必須開始新的時鐘，必須停止前一個。

然後，我跟着JB Nizet的評論，我用下面的代碼實現了運行時鐘。

打字稿代碼

定義一個全局變量的日期，出口類。

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>

而目前，當我張貼了這個答案它的正常工作..

來源

2017-09-23 10:50:16 Bharat

如果是我，我會使用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矩管

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

來源

2017-09-19 13:12:03 joshrathke

謝謝@josh，我在想最後一個選項的時刻，但是我從#JB Nizet的評論中得到了一個好主意，這很簡單。 – Bharat

在Angular 4.3中運行時鐘

回答

相關問題