提问者:小点点

Angular 4每次组件加载时重新加载函数


所以这里是函数

    greenToAmber() {
        let x = 0;
        setInterval(function () {
          x++;
          ..... Rest of code
        }, 500);
      }
    }

正如您所期望的那样,我已经使用路由设置了这个组件,我也尝试在OnInit中调用该函数,但是每次我去这个组件然后关闭它并再次返回计数器都会启动计数器的第二个实例

从我的理解,我认为ngOnDestroy是为了防止这种情况,我假设我需要订阅,然后取消订阅功能,也许在销毁?

但我对角4相对较新,所以相当缺乏经验。


共2个答案

匿名用户

setInterval不会在组件销毁时销毁,您必须将间隔id保存在您的类中并使用clearInterval javascript原生函数在您的组件销毁钩子ngOnDestroy上清理它:

import {Component, OnDestroy} from '@angular/core';

@Component({ ... })
export class YourClass implements OnDestroy {

    public intervalId: any; 

    public greenToAmber() {
        let x = 0;
        // registering interval
        this.intervalId = setInterval(function () {
          // ..... Rest of code
        }, 500);
      }
    }

    public ngOnDestroy () {
        if (this.intervalId !== undefined) {
            clearInterval(this.intervalId); // cleaning interval
        }
    }
}

希望有帮助。

匿名用户

您正在使用setInterval设置一个恶魔进程。您提到的行为是预期的。这就是JavaScript的工作方式。它不是Angular特定的。

SetInterval总是返回一个您可能想要在控制器中跟踪的ID。当您想要销毁它时,请确保您专门这样做。

例如:

greenToAmber() {
        let x = 0;
        $scope.myDemon = setInterval(function () {
          x++;
          ..... Rest of code
        }, 500);
      }
    }

//Somewhere else; where you want to destroy the interval/stop the interval:
If($scope.myDemon) {
    clearInterval($scope.myDemon);
}