如何取消订阅 observable

Posted 2023-03-13

【中文标题】如何取消订阅 observable

【英文标题】：how to unsubscribe for an observable

【发布时间】：2018-10-08 20:09:34

【问题描述】：

我有一个角度应用程序，我正在读取文件并处理它，这个处理是 observable 的一部分。 我有一个服务，它返回可观察的（ngbusy：订阅）。 我在我的组件中订阅了这个 observable。可观察对象被分配给显示微调器的 ngBusy。 现在即使订阅完成，微调器也会继续旋转。我知道我们需要取消订阅 obervable。 但是，当我以与订阅相同的方法取消订阅时，我什至看不到微调器显示。 我们是否应该总是使用 ngOndestroy 来取消订阅。

service.ts

const obsrv:Observable
obsrv= new Observable((observer) =>     
    // observable execution
    observer.next(this.items)
    observer.complete()
)

组件.ts

processItems() 
    ngbusy  = this.myservice.observable.subscribe(items => 
        //perform some business logic 
    );
    this.myservice.observable.unsubscribe(); //not working here

【参考方案1】：

您必须取消订阅，而不是 observable：

processItems() 
    const ngbusy = this.myservice.observable.subscribe(items => 
        // perform some business logic 


        // unsubscribe at some point...
        ngbusy.unsubscribe();
    );

    // this will unsubscribe immediately...
    ngbusy.unsubscribe();

【讨论】：

@Sebastian，谢谢。我想我也试过取消订阅。让我再试一次。订阅代码结束后不久可以用相同的方法完成吗？

您应该在不需要订阅的时候取消订阅。如果它在方法之外，请将订阅分配给类属性而不是变量。这样你就可以在课堂上的任何地方取消订阅。

这对我不起作用。微调器没有关闭。

【参考方案2】：

这是使用 takeuntil 和 ngUnsubscribe

的好方法

private ngUnsubscribe: Subject = new Subject();

ngOnInit() 
  this.myThingService
    .getThings()
    .takeUntil(this.ngUnsubscribe)
    .subscribe((things) => console.log(things));
  /* if using lettable operators in rxjs ^5.5.0
      this.myThingService.getThings()
          .pipe(takeUntil(this.ngUnsubscribe))
          .subscribe(things => console.log(things));
      */
  this.myThingService
    .getOtherThings()
    .takeUntil(this.ngUnsubscribe)
    .subscribe((things) => console.log(things));

ngOnDestroy() 
  this.ngUnsubscribe.next();
  this.ngUnsubscribe.complete();