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

如何使用angular2仅在组件init上运行一次间隔？

1 个答案: