在可觀察完成時處置訂閱

Question

在Angular 2的指南中，它說：

“Observable運算符的默認行為是在發布.complete（）或.error（）消息后立即處理訂閱。請記住，RxJS旨在以”一見不醒“的方式使用。時間。”

在前面的頁面中有一個可觀察和訂閱的例子。

這里的例子 。

你可以在3秒后看到onbservable“.complete（）”。 但是當再次單擊Init（）按鈕並調用init（）方法時，仍然會通知訂戶。 那么作者通過說“處理訂閱”的意思是什么？

碼：

import {Component} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Component({
    selector: 'app',
    template: `
      <b>Angular 2 Component Using Observables!</b>

      <h6 style="margin-bottom: 0">VALUES:</h6>
      <div *ngFor="let value of values">- {{ value }}</div>

      <h6 style="margin-bottom: 0">ERRORs:</h6>
      <div>Errors: {{anyErrors}}</div>

      <h6 style="margin-bottom: 0">FINISHED:</h6>
      <div>Finished: {{ finished }}</div>

      <button style="margin-top: 2rem;" (click)="init()">Init</button>
    `
})
export class MyApp {

  private data: Observable<Array<number>>;
  private values: Array<number> = [];
  private anyErrors: boolean;
  private finished: boolean;

  constructor() {
  }

  init() {
      this.data = new Observable(observer => {
          setTimeout(() => {
              observer.next(42);
          }, 1000);

          setTimeout(() => {
              observer.next(43);
          }, 2000);

          setTimeout(() => {
              observer.complete();
          }, 3000);
      });

      let subscription = this.data.subscribe(
          value => this.values.push(value),
          error => this.anyErrors = true,
          () => this.finished = true
      );
  }

}

Answer 1

這是因為每次單擊init時都會創建一個新的observable。 嘗試更改您的行：

this.data = ...

至

if(!this.data){
  this.data = ...

你會看到init進一步調用不會調用處理程序

Answer 2

在構造函數中移動Observable的創建。

你可以在構造函數中有一個主題，例如

constructor() {   
   super();   
   this.data$ = new Rx.Subject(); 
}

然后在你的點擊處理程序中你可以做類似的事情：

this.data.onNext(42)

如果您也手動觸發onComplete ，則必須在調用onNext之前檢查流是否已完成

Answer 3

當您在位置或路由器事件等事件上創建訂閱時，訂閱會在組件被銷毀后保留現有事件，這可能導致很難發現錯誤和不需要的行為。

在觸發http調用后，連接在成功傳輸后關閉，您的訂閱將被關閉，因為observable會觸發complete（）。

這是我最近編寫的代碼示例：

ngOnInit(): void {
    ...
    this.electionStateSubscription = this.electionState.getState()
            .subscribe((state: ElectionState) => this.state = state);
}

ngOnDestroy(): void {
    ...
    this.electionStateSubscription.unsubscribe();
}

在這個例子中已經構建了一個類似於redux的狀態存儲，並在此組件中訂閱了它。 electionState始終存在且永遠不會完成。

當該成分被破壞了訂閱設置 。 否則，每次初始化組件時都會創建一個新的訂閱，如果沒有其他錯誤發生可能會導致性能問題。