en cours d'exécution en Angular 4.3

Question

Je veux une horloge en cours d'exécution (numérique) sur l'une de mes application Angular 4.3.

J'ai essayé beaucoup de R & D pour cela, mais je n'ai pas réussi.

également il n'y a pas de référence d'horloge à retard angulaire.

J'ai donc essayé d'ajouter une solution basée sur le script Java, mais cela ne fonctionnait pas non plus.

voir le code ci-dessous.

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; 
} 

Je ne sais même pas que ce soit une bonne pratique ou non.

Quelqu'un peut-il m'aider avec ceci?

Answer 1

Plus tôt ce que je faisais était tout à fait tort. Maintenant, Mon scénario actuel a une liste déroulante et à chaque événement de changement de liste déroulante, je dois démarrer une nouvelle horloge et arrêter la précédente. Ensuite, j'ai suivi le commentaire de JB Nizet, et j'ai réalisé l'horloge courante en utilisant le code ci-dessous.

Code tapuscrit

défini par une variable globale de date dans la classe d'exportation. Puis, dans la méthode Change de drop down, j'ai ajouté ma solution.

//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); 

Maintenant, this.Time seront mis à jour par seconde.

Html

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

Et actuellement, il fonctionne très bien quand je posté cette réponse ..

Answer 2

Si c'était moi, j'utiliserais Moment.js et mettrais en place une fonction d'intervalle dans le constructor() du composant pour mettre à jour la propriété clock chaque seconde. Vous pouvez ensuite afficher la propriété clock dans le composant en conséquence.

Component

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. 
} 

Sinon, vous pouvez enregistrer un horodatage de base à la propriété dans votre composant, puis utiliser un tuyau à l'extrémité avant comme Angular2-moment. J'irais probablement dans cette direction car cela vous donne plus de flexibilité avec la propriété d'horloge en termes de pouvoir la réutiliser ailleurs sans trop se tromper avec le format.

Angular2 Moment pipe

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