处理中的订阅时观察到的完成

问题描述：

“可观察运营商的默认行为是尽快处置订阅作为.complete（）或.error（）消息请记住，RxJS的设计目的是在大多数时间以“随意而忘却”的方式使用。“

在前面的页面中有一个可观察和订阅的例子。

你可以在那里看到，在3秒后，可见的“.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 
    ); 
    } 

}

答

这是因为每次点击初始时间创建一个新的观测。试着改变你的线路：

this.data = ...

到

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

，你会看到的init进一步调用不会调用处理程序

答

移动构造函数中你可观察到的创建。

您可以在构造函数中包含主题，例如

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

那么你的点击处理程序中，你可以这样做：

this.data.onNext(42)

如果触发onComplete也可手动你必须检查流调用onNext

答

前完成

当您在位置或路由器事件等事件上创建订阅时，订阅会在组件销毁后保留现有事件，这可能会导致预先tty很难找到错误和不需要的行为。

当发起http调用时，连接在传输成功后关闭，并且您的订阅将被关闭，因为可观察火灾完成（）。

这是最近我写的代码的例子：

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

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

在这个例子中都内置样的状态商店终极版和我订阅它在此组件。 electionState始终存在，永远不会完成。

当这个组件被销毁时，订阅是处置。否则，每次组件初始化时都会创建一个新的订阅，如果没有其他问题发生，可能会导致性能问题。

处理中的订阅时观察到的完成

相关推荐