下面是一个使用Angular 4实现的可观察的计时器(以分钟为单位)的代码示例:
首先,创建一个名为timer.service.ts
的服务文件,并在该文件中编写以下代码:
import { Injectable } from '@angular/core';
import { Observable, Subject, timer } from 'rxjs';
import { takeUntil, map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class TimerService {
private destroy$ = new Subject();
startTimer(minutes: number): Observable {
return timer(0, 60000).pipe(
takeUntil(this.destroy$),
map((tick) => minutes - tick)
);
}
stopTimer() {
this.destroy$.next();
this.destroy$.complete();
}
}
然后,在你想要使用计时器的组件中,注入TimerService
并使用它来启动和停止计时器。例如,假设你的组件名为TimerComponent
,以下是一个示例:
import { Component, OnInit } from '@angular/core';
import { TimerService } from './timer.service';
@Component({
selector: 'app-timer',
template: `
{{ remainingMinutes }} minutes remaining
`
})
export class TimerComponent implements OnInit {
remainingMinutes: number;
constructor(private timerService: TimerService) { }
ngOnInit() {
this.startTimer(10); // 以10分钟为例
}
startTimer(minutes: number) {
this.timerService.startTimer(minutes).subscribe((remainingMinutes) => {
this.remainingMinutes = remainingMinutes;
if (remainingMinutes <= 0) {
this.timerService.stopTimer();
}
});
}
}
在上面的示例中,TimerComponent
会在初始化时调用startTimer
方法,传入所需的分钟数。然后,它会订阅timerService.startTimer
返回的可观察对象,并在每个计时周期中更新remainingMinutes
的值。当剩余分钟数小于等于0时,调用timerService.stopTimer
来停止计时器。
最后,在你的模块中将TimerService
添加到providers
数组中。例如,在app.module.ts
中:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TimerComponent } from './timer.component';
import { TimerService } from './timer.service';
@NgModule({
imports: [BrowserModule],
declarations: [TimerComponent],
providers: [TimerService],
bootstrap: [TimerComponent]
})
export class AppModule { }
现在,当你运行应用程序时,TimerComponent
就会显示剩余分钟数,并且每分钟更新一次。当剩余分钟数为0或负数时,计时器将停止。