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

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

在迭代数组时，我可以访问警报将通知的所有“时间”，但触发它们的最佳方式是什么？我只想在特定时间显示简单的警报。这是我一直都在使用的数组。我将用当前时间减去该值并将毫秒传递给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);

来源

2017-05-03 Dinesh Gupta

所以，首先，如果你正在寻找最好的做法，我建议你把你的迭代代码的服务，而不是在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; 
    }  
}

来源

2017-05-03 21:19:22

三江源，你能不能帮我一下呢？我创建了该服务，但我无法理解如何进一步处理。 –

这应该对你有所帮助：[指南]（https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#register-providers-component） –

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

回答

相关问题