angularではRxJSでストリームを扱うことが多い。そうした中で画面遷移が絡む場合、画面遷移した後でも、前の画面で使用していたsubscribeが生き続けるといった問題が発生する。

ということで、必要に応じて画面遷移した際に、unsubscribeしてあげる必要がある。

OnDestroy時にunsubscribeする方法

unsubscribeする方法として、まずコンポーネントをOnDestroyする際に、unsubscribeする方法がある。

RxJSのSubscription#unsubscribeを使う。
http://reactivex.io/rxjs/class/es6/Subscription.js~Subscription.html

実装すると以下のようになる。

...

// 必要に応じて以下をインポートする
import { Subscription } from 'rxjs';

...

export class App implements OnInit, OnDestroy {
  eventStream$: Observable<EventStream>
  subscription: Subscription;

  ngOnInit() {
    this.subscription = this.eventStream$.subscribe(...);
  }

  ngOnDestroy() {
    // コンポーネントを破棄する時にunsubscribeする
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

subscribeするストリームが複数ある場合は、subscriptionを配列にしても良い。

...

export class App implements OnInit, OnDestroy {
  eventStream1$: Observable<EventStream>
  eventStream2$: Observable<EventStream>
  subscriptions: Subscription[] = [];

  ngOnInit() {
    this.subscriptions.push(this.eventStream1$.subscribe(...));
    this.subscriptions.push(this.eventStream2$.subscribe(...));
  }

  ngOnDestroy() {
    if (this.subscriptions) {
      this.subscriptions.forEach(sub => sub.unsubscribe());
    }
  }
}

URLを基準にイベントをフィルタリングする方法

こちらは、unsubscribeする代わりに、特定のURLの時だけsubscribeする方法。

RxJSのfilterオペレータを使う。
http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-filter

実装すると以下のようになる。

...

// 必要に応じて以下をインポートする
import { Router } from '@angular/router';
import 'rxjs/add/operator/filter';

...

export class App implements OnInit {
  eventStream$: Observable<EventStream>

  constructor(
    private router: Router,
  ) { }

  ngOnInit() {
    this.eventStream$
      // URLが'/app'の時だけsubscribeする
      .filter((eventStream: EventStream) => this.router.url === '/app')
      .subscribe(...);
  }
}

subscribeするのは1回だけで良い場合

unsubscribeで停止しても良いが、RxJSのtakeオペレータを使っても良い。
http://reactivex.io/documentation/operators/take.html

実装すると以下のようになる。

...

// 必要に応じて以下をインポートする
import 'rxjs/add/operator/take';

...

export class App implements OnInit, OnDestroy {
  eventStream$: Observable<EventStream>

  ngOnInit() {
    this.eventStream$.take(1).subscribe(...);
  }
}

まとめ

状況に応じて使い分ける。ブラウザの戻る、進むによってsubscribeが重複したりするので、その辺りは十分に注意する。