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

Question

所以这是功能

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

我已经按照你的预期使用路径设置了这个组件，我也尝试在OnInit中调用该函数，但是每次我去这个组件然后关闭它然后再次返回计数器将启动计数器的第二个实例然后每次我离开并回到页面时第三个等等。

从我的理解，我认为ngOnDestroy旨在防止这种情况，我假设我需要订阅然后取消订阅该功能可能在销毁？

但我对角度4相对较新，所以非常缺乏经验。

Answer 1

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

希望它有所帮助。

Answer 2

你正在用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);
}