Question

我正在使用Angular 2 JS构建闹钟。我已经完成了很多工作，但现在我已经将所有时间（我们设置闹钟的时间）放在一个数组中。

在迭代数组时，我可以访问所有＆＃34;时间＆＃34;警报会通知，但触发它们的最佳方法是什么？我只想在特定时间显示一个简单的警报。这是我的阵列，一直都有。我将使用当前时间减去该值，并将毫秒传递给SetTimeout（）函数。

1）最好的方法是什么？

2）如果在迭代时，我调用Set Timeout函数，再次在下一次迭代中赢得前一个警报的值超过当前迭代的值？

3）您认为触发警报的理想结构和逻辑是什么？

ngOnInit() {

    var all =  JSON.parse(localStorage.getItem('user'));
        for(var i =0; i < all.length; i++){
           var hours = all[i]['hours'];
           hours = new Date(hours).getTime();
           console.log(hours);
       }

  }

这是SetTimeout函数

setTimeout(() => {
    this.FlashMessage.show('ALARM CLOCK WAKE UP', {cssClass: 'alert-danger', timeout: 5000});
    }, milisec);

Answer 1

首先，如果您正在寻找最佳实践，我建议您将迭代代码放到服务中，而不是在组件类内部的ngOnInit生命周期钩子中声明它。

其次你应该考虑过期的警报。所以你需要创建一个像checkAlarms(): number[]这样的方法来过滤你的时间与当前的比较。所以在这里你可以实现删除警报的任何逻辑删除或只是跳过它们。

所以最后一步是执行SetTimeout。如前所述，我建议你解耦逻辑。例如：

component.ts

constructor(private alarmService: AlarmService) {}

ngOnInit() {
  let time = new Date().getTime()
  this.alarmService.setUpAlarms(time);
}

service.ts

@Injectble()
export class AlarmService {
   constructor(private flashMessage: FlashMessage) {}

   public setUpAlarms(currentTime: number): void {
        this.savedAlarms
               .filter(alarm => this.checkAlarm(alarm, currentTime))
               .forEach(time => 
                  setTimeout(() => this.flashMessage.show(
                     'ALARM CLOCK WAKE UP', 
                     {cssClass: 'alert-danger', timeout: 5000}
                 )}, time))
   }

   private get savedAlarms(): number[] {
        let alarms = JSON.parse(localStorage.getItem('user'));
        return Object.keys(alarms).map(param => {
             let time = alarms[param].hours;
             return new Date(time).getTime();
        });
   }

   private checkAlarm(alarm: number, currentTime: number): boolean {
        if (alarm < currentTime) {
           // do_something_here
           return false;
        }
        return true;
   }    
}

如何在Angular 2中触发警报（在闹钟中）？

1 个答案: