ReactiveX JS 和 TypeScript - 如何取消订阅？

Posted 2023-03-10

【中文标题】ReactiveX JS 和 TypeScript - 如何取消订阅？

【英文标题】：ReactiveX JS and TypeScript - How to unsubscribe?

【发布时间】：2016-12-14 04:36:11

【问题描述】：

我一直在尝试使用 TypeScript 在 Angular 2 组件中实现新的 rxjs Observable。我创建了一个服务，MyService，它在其中一个方法中返回一个 observable，例如，

export class MyService 

    getMyObs()
        return new Observable(observer => 
            observer.next(42);
        );
    

然后在我的 Angular 2 组件中，我在 OnInit 中订阅这个 observable，例如，

export class MyComponent implements OnInit 
obs: any;

constructor(private myService: MyService);    

    ngOnInit 
        this.obs = myService.getMyObs().subscribe(data => 
            // Do stuff here...
        );
        

RxJs documentation 谈论取消订阅你的 observable 以便你的 observable 知道不再向你的观察者发送消息。因此，我认为当我的组件被销毁时，我应该取消订阅 observable，例如

export class MyComponent implements OnInit, OnDestroy 
obs: any;

constructor(private myService: MyService);    

    ngOnInit 
        this.obs = myService.getMyObs().subscribe(data => 
            // Do stuff here...
        );
     

    ngOnDestroy 
        this.obs.unsubscribe();
      

虽然这对我来说很有意义，但 typescript 编译器会抛出（实际上是应用程序会抛出）说没有 unsubscribe 方法。类型定义文件中似乎没有描述这种方法。如何使用 TypeScript 正确取消订阅 observable？

【参考方案1】：

您需要将 unsubscribe 方法添加到您的 Observable.、Disposing Observable Executions

return new Observable(observer => 
  observer.next(42);

  return () => 
    console.log('unsubscribe')
  
); 

【讨论】：

我们可以在 Angular 8 中也这样做吗？

【参考方案2】：

首先创建订阅如下。

private obs: Subscription = new Subscription();

然后赋值给 observable。

this.obs = myService.getMyObs().subscribe(data => 
       if(data !== null)
        this.obs.unsubscribe()
         
    );

【参考方案3】：

可以在Rxjs模块的Subscription.d.ts（类Subscription）中找到unsubscribe方法的定义。

事实上，您取消订阅的是订阅而不是 observable。