如何在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中觸發警報（在鬧鐘中）？

回答

相關問題