Question

这是函数

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

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

根据我的理解，我认为ngOnDestroy旨在防止这种情况，我假设我需要先订阅然后取消订阅该函数，否则可能会销毁？

但是我对Angle 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);
}

每次加载组件时都会重新加载Angular 4+ Function

2 个答案: