如何使用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);
    }
}