Angular 从行为主体中取消订阅，视为可观察

我在我的一个服务中创建了一个

BehaviorSubject

，并将其用作可观察的对象，以便以后订阅，但我需要在控制器被销毁后取消订阅，我如何才能从中取消订阅

服务

import { Observable, BehaviorSubject } from 'rxjs';

  private currentStepObject = new BehaviorSubject<number>(0);
  public currentStepObservable = this.currentStepObject.asObservable();

  constructor(
  ) { }

  public changecurrentStep(step: number): void {
    this.currentStepObject.next(step);
  }

---

将其分配给类型为

subscription

的

subscription

变量，该变量可以从

rxjs

导入

，然后在
ngondestory
中从其取消订阅

import { ReaderService } from '../../../../services/reader/reader.service';
import { Subscription } from 'rxjs';

subscription: Subscription;

constructor(
  private readerServices: ReaderService
) {}

ngOnInit() {
  this.initDocumentData();
  this.subscription = this.readerServices.currentStepObservable
    .subscribe(step => this.currentStep = step);
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

或者在模板中使用
async
管道：
然后在模板中：

{{ this.currentStep$ | async }}

这样，您就不必从
可观察的
中取消订阅
，Angular会处理它。
您可以这样做

 import { ReaderService } from '../../../../services/reader/reader.service';
 subscription : Subscription;

 constructor(
 private readerServices: ReaderService
   ) { }

 ngOnInit() {
 this.initDocumentData();
 this.subscription = this.readerServices.currentStepObservable
  .subscribe((step) => {
    this.currentStep = step;
  });
   }

 ngOnDestroy() {
   this.subscription.unsubscribe();
 }

试着用有帮助的内心主题

更新：在这种情况下，您不必手动取消订阅组件中的每个订阅，因为组件中可能有多个订阅

import { ReaderService } from '../../../../services/reader/reader.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'

export class MyComponent implements OnInit, OnDestroy {

  private unsubscribe$: Subject<any> = new Subject<any>();
  constructor(
    private readerServices: ReaderService
  ) { }

  ngOnInit() {
    this.initDocumentData();
    this.readerServices.currentStepObservable.pipe(
      takeUntil(this.unsubscribe$)
    )
    .subscribe((step) => {
      this.currentStep = step;
    });
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}

从'../../../../services/reader/reader.service'导入{ReaderService}；
从'rxjs'导入{Subject}；
从'rxjs/operators'导入{takeUntil}
导出类MyComponent实现OnInit、OnDestroy{
private unsubscribe$：Subject=new Subject（）；
建造师(
私人阅读器服务：阅读器服务
) { }
恩戈尼尼特（）{
这是.initDocumentData（）；
this.readerServices.currentStepObservable.pipe(
takeUntil（此.取消订阅$）
)
.订阅（（步骤）=>{
此.currentStep=步骤；
});
}
恩贡德斯特罗（）{
此。取消订阅$.next（）；
此.unsubscribe$.complete（）；
}
}
每个Observable.subscribe（）返回一个订阅。最好创建一个订阅数组并在其中添加所有订阅。
销毁组件（ngOnDestroy lifecycle hook）时，在订阅数组中循环并调用unsubscribe

执行此操作时，您无需管理来自不同订阅者的不同订阅。
这里由RxJS的维护者提供：可能重复
 import { ReaderService } from '../../../../services/reader/reader.service';
 subscription : Subscription;

 constructor(
 private readerServices: ReaderService
   ) { }

 ngOnInit() {
 this.initDocumentData();
 this.subscription = this.readerServices.currentStepObservable
  .subscribe((step) => {
    this.currentStep = step;
  });
   }

 ngOnDestroy() {
   this.subscription.unsubscribe();
 }

import { ReaderService } from '../../../../services/reader/reader.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'

export class MyComponent implements OnInit, OnDestroy {

  private unsubscribe$: Subject<any> = new Subject<any>();
  constructor(
    private readerServices: ReaderService
  ) { }

  ngOnInit() {
    this.initDocumentData();
    this.readerServices.currentStepObservable.pipe(
      takeUntil(this.unsubscribe$)
    )
    .subscribe((step) => {
      this.currentStep = step;
    });
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}