Angular2 - 組件在更改頁面時保持運行

我有一個大的Angular2應用程序。我擁有的一條路線是/rewards，這是我們提供的所有獎勵的列表。我有另一條路線是/reward/{rewardName}這是一個單一的獎勵細節頁面。我遇到的問題是，當我再次打開和第四/rewards路線和不同/reward/{rewardName}路線之間，所有的，我已經打了/reward/{rewardName}頁的繼續運行。我知道這是因爲我在/reward/{rewardName}組件中的ngOnInit中有setInterval。因此，如果我點擊/reward/{rewardName}路線5次，它將註銷quantity的5個實例，如下面的代碼所示。爲什麼這個組件永遠不會停止運行？（繼續不管跑，我去現場的其餘哪一頁）Angular2 - 組件在更改頁面時保持運行

代碼：

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

    ... 
}

來源

2017-02-22 georgej

如果你只有一臺路由器的參數值被改變的方式瀏覽，但在其他方面同樣的路線是使用，組件不會被銷燬，但可以重新使用。

在自定義重用策略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']); 
}

來源

2017-02-22 15:31:43

好，否則你會期待:)？如果你沒有指定這個，角怎麼會神祕地阻止你的setInterval。 eventListeners和subscriptions也是如此。你應該在ngOnDestroy停止這些。

private _interval: number; 

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


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

來源

2017-02-22 15:31:59 PierreDuc

Angular2 - 組件在更改頁面時保持運行

回答

相關問題