角度2のアラーム（目覚まし時計）を起動するにはどうすればよいですか？

Question

私はAngular 2 JSを使って目覚まし時計を作ります。私はかなり終わりましたが、今私はすべての時間（警報を発する時間）を配列で持っています。

アレイを反復する際に、アラームが通知するすべての「時間」にアクセスできますが、それらをトリガする最良の方法は何ですか？私は特定の時間に簡単なアラートを表示したいだけです。これは常に私の配列です。現在の時間で値を減算し、ミリ秒を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ライフサイクルフックでそれを宣言するためにあなたを示唆しているので、最初にありますコンポーネントクラスの内部。

第2に、期限切れのアラームについて考える必要があります。したがって、現在と比較して時間をフィルタリングする方法を作成する必要があります。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; 
    }  
}