代码之家 › 专栏 › 技术社区 › Munerz

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

angular javascript

2

Munerz · 技术社区 · 7 年前

这里是函数

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

我已经使用您所期望的路由设置了这个组件,我也尝试过在oninit中调用函数,但是每次我转到这个组件,然后关闭它,然后再返回,计数器将启动计数器的第二个实例,然后每次我离开并返回页面时,都会启动第三个ect。

根据我的理解,我认为Ngondestroy是用来防止这种情况的,我假设我需要订阅然后取消订阅这个函数,也许是在destroy?

但我对角度4还比较陌生,所以很缺乏经验。

2 回复 | 直到 7 年前

1

2

Julien METRAL 7 年前

组件销毁时不会销毁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
        }
    }
}

希望有帮助。

2

0

Pruthvi Kumar 7 年前

你在用 setInterval 是的。你提到的行为是意料之中的。这就是javascript的工作原理。它不是特定角度的。

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