Angular2 - 组件保持运行时更改页面[复制](Angular2 - Component k

这个问题已经在这里有一个答案：

• Angular2路由器2.0.0不重装组件时加载不同的参数相同的网址？ 3个回答

我有一个大Angular2应用。 我一个路线我已经是/rewards这是我们提供的所有奖励名单。 我有另一条路线是/reward/{rewardName}这是一种单一奖励详细信息页面。 我遇到的问题是，当我再次打开和第四之间/rewards航线和不同/reward/{rewardName}路线，所有的/reward/{rewardName} ，我打的页面继续运行。 我知道这是因为我有一个setInterval在ngOnInit我/reward/{rewardName}组件。 所以，如果我打了/reward/{rewardName}路线5倍，这将注销的5个实例quantity ，如在下面的代码。 为什么这个组件从未停止运行？ （继续我去哪个页面在网站的休息，无论运行）

码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { RewardDetailService } from './reward-detail.service';
import { AuthService } from '../../auth/auth.service';

@Component({
  selector: 'reward-detail-component',
  styleUrls: [ './reward-detail.component.scss' ],
  templateUrl: './reward-detail.component.html'
})

export class RewardDetailComponent implements OnInit {
    ...
    quantity = 1;

    constructor(private rewardsDetailService: RewardDetailService, private activatedRoute: ActivatedRoute, private authService: AuthService, private router: Router) { ... }

     ngOnInit() {
        setInterval(() => {
          console.log('QUANTITY: ', this.quantity);
        }, 1000) 
      }

    ...
}

Answer 1:

如果你只有一台路由器的参数值发生变化，但在其他方面则使用同一个路由的方式浏览时，组件不被破坏，但重复使用。

在自定义重用策略2.3支持添加到覆盖此行为。

也可以看看：

• https://github.com/angular/angular/pull/13124允许提供一个自定义重用策略。

• https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx

或者你可以只订阅PARAM变化，做你的初始化回调：

constructor(private rewardsDetailService: RewardDetailService, private activatedRoute: ActivatedRoute, private authService: AuthService, private router: Router) { 
  router.params.forEach(param => this.myInit(param['rewardName']);
}

Answer 2:

嗯，还有你会期待:)？ 如何能神不知鬼不觉的角停止你setInterval如果不指定。 这同样适用于eventListeners和subscriptions 。 你应该停止这些ngOnDestroy 。

private _interval: number;

ngOnInit() {
    this._interval = setInterval(() => {
      console.log('QUANTITY: ', this.quantity);
    }, 1000) 
}


ngOnDestroy() {
    clearInterval(this._interval);
}

文章来源: Angular2 - Component keeps running when change page [duplicate]