如何解决如何在角度组件中使用以下计时器服务
如何在组件中使用它来显示计时器/倒数?拥有这样的服务是一种好习惯吗?
import { Subscription,timer } from 'rxjs';
import { switchMap } from 'rxjs/operators';
export class IntervalRunnerOptions {
constructor(
public callback:()=>void,public period:number=1000,public initialDelay:number=0,public TotalTime: number) {
}
}
export class IntervalRunner {
subscription: Subscription = null;
start(options:IntervalRunnerOptions) {
if(this.subscription==null) {
this.subscription = timer(options.initialDelay,options.period).subscribe(result => options.callback());
}
}
stop() {
if(this.subscription!=null) {
this.subscription.unsubscribe();
this.subscription = null;
}
}
}
解决方法
这里是stackblitz,向您展示如何使用它
@Component({
selector: "my-app",template: `
<button (click)="start()">Start</button>
<button (click)="stop()">Stop</button>
<p>
<em>{{ message }}</em>
</p>
`
})
export class AppComponent {
message: string;
constructor(private runner: IntervalRunner) {}
start() {
this.runner.start(
new IntervalRunnerOptions(e => (this.message = "Hi: " + e),1000,5)
);
}
stop() {
this.runner.stop();
}
}
我已经修改了回调函数,以接受参数public callback: (e: any) => void
,然后将计时器的结果传递给它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。