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

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 设为静态。这样所有 class 个实例都可以访问同一个实例。

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 上的间隔仅一次？

How to run an interval on component init only once with angular2?

setinterval

typescript

angular

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

How to run an interval on component init only once with angular2?

setinterval

typescript

angular

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