コンポーネントinitでinterval2を使用してインターバルを1回だけ実行する方法はありますか？

Question

私は私のコンポーネントに発売間隔があります。

export class FoobarComponent implements OnInit { 

    ngOnInit(): void { 
     this.startInterval(); 
    } 

    startInterval() void { 
     setInterval(() => { console.log('Hi'); }, 1000); 
    }  
} 

コンポーネントが呼び出されるたびに、新しい間隔が以前のものに加えて、作成されます。

私のようなもので（私は前に平野JSで行うために使用されるような）IDを使用してみました：コンポーネントが呼び出されるたびに未定義になった

export class FoobarComponent implements OnInit { 

    intervalId: Number; 

    ngOnInit(): void { 
     this.startInterval(); 
    } 

    startInterval() void { 
     if(this.intervalId) { // always undefined 
      window.clearInterval(this.intervalId); 
     } 
     this.intervalId = window.setInterval(() => { console.log('Hi'); }, 1000); 
    } 
} 

しかし、それはintervalId以来、働いていません。したがって、前の間隔は新しい間隔が作成されている間は継続しています。

私はすでに実行中のインターバルを止める方法がわかりません。 私はそれを手伝ってもらえますか？

Answer 1

intervalIDを静的にすることができます。そうすれば、すべてのクラスインスタンスが同じインスタンスにアクセスできるようになります。

export class FoobarComponent implements OnInit { 

    static intervalId: Number; 

    ngOnInit(): void { 
     this.startInterval(); 
    } 

    startInterval() void { 
     if(FoobarComponent.intervalId) { // always undefined 
      window.clearInterval(this.intervalId); 
     } 
     FoobarComponent.intervalId = window.setInterval(() => { console.log('Hi'); }, 1000); 
    } 
}