web-dev-qa-db-ja.com

イベントエミッタを1回購読する方法は？

// Part of service
public someEvent: EventEmitter<number> = new EventEmitter();

....

// Component
@Component({
  selector: 'some-component',
  template: `...`
})
export class SomeComponent {
  constructor(public service: Service) {
    this.service.someEvent.subscribe((x) => {
      // Do something
    });
  }
}

SomeComponentは/ルートに表示されます。アプリケーション内の別のルートに移動して再び戻ったとき、SomeComponentはイベントに再度サブスクライブし、コールバックが2回発生します。イベントを一度サブスクライブする方法、またはコンポーネントの破棄時にサブスクライブを解除し、再度サブスクライブする方法

// Can't subscribe after.
ngOnDestroy() {
  this.service.someEvent.unsubscribe();
}
angularrxjseventemitterangular2-servicesrxjs5
26
Eggy

subscribeを呼び出すと、 Disposableのインスタンス が返されます。これには、メソッド dispose があります。

または、RxJS 5を使用している場合、 disposeはunsubscribeに名前が変更されました （@EricMartinezに感謝）。

そして RxJS docs から：

...データがストリーミングされるときにデータを受信する必要がなくなったら、サブスクリプションでdisposeを呼び出します。

subscribeへの呼び出しの結果を保存し、後でngOnDestroy内のサブスクリプションを破棄します。

RxJS 5：

export class SomeComponent {
  constructor (public service: Service) {
    this.subscription = this.service.someEvent.subscribe((x) => {...});
  }
  ngOnDestroy () {
      this.subscription.unsubscribe();
  }
}

RxJS <5：

export class SomeComponent {
  constructor (public service: Service) {
    this.subscription = this.service.someEvent.subscribe((x) => {...});
  }
  ngOnDestroy () {
      this.subscription.dispose();
  }
}
36
sdgluck

次のようなことができます：

import { OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Rx';

export class SomeComponent implements OnDestroy {
  private _subscription: Subscription;
  constructor(public service: Service) {
    this._subscription = this.service.someEvent.subscribe((x) => {
      // Do something
    });
  }
}

ngOnDestroy(){
  this._subscription.unsubscribe();
}
3
ShellZero