Angular从计时器开始计时的秒数

Question

我如何在Angular中从特定的秒数开始计数计时器?另外，如果可能的话，我需要格式为hh:mm:ss。

我试过这样做，从模板中调用getAlarmDuration，持续时间以秒为单位。

getAlarmDuration(duration: number): any {
this.countStart = duration;
setInterval(this.setTime, 1000);
}
setTime(): void {
++this.countStart;
console.log(this.pad(parseInt((this.countStart / 60).toString(), 10)) + ':' + this.pad(this.countStart % 60))
}
pad(val: any): string {
var valString = val + "";
if (valString.length < 2) {
return "0" + valString;
}
else {
return valString;
}
}

提前感谢。

Answer 1

您可以使用'rxjs'中的interval，并将计数器映射到所需的结果。

import { Component } from '@angular/core';
import { interval } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Count';
currentSeconds = 60;
// interval will emit every 1000ms
count$ = interval(1000).pipe(
// transform the stream to the result you want -- hh:mm:ss 
map(count => this.format(count + this.currentSeconds * 1000))
);
format(seconds: number): string {
return new Date(seconds + +new Date()).toLocaleString('en-EN', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
}
}

这是一个链接到stackblitz的示例工作示例