如何使用angular2在組件初始化上運行一次間隔？

Question

我在組件中啟動了一個間隔：

export class FoobarComponent implements OnInit {

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

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

每次調用該組件時，除了先前的間隔外，還會創建一個新的間隔。

我試圖使用一個ID（就像我以前使用純JS一樣）：

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);
    }
}