Angular2 - Компонент продолжает работать при смене страницы

Question

У меня есть большое приложение 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); 
}