代码之家 › 专栏 › 技术社区 › Miguel Frias

从行为主体退订为可观察

typescript angular

Miguel Frias · 技术社区 · 6 年前

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);
  }

控制器

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

   constructor(
    private readerServices: ReaderService
   ) { }

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

  ngOnDestroy() {
  }

4 回复 | 直到 6 年前

Maksym Shevchenko 6 年前

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

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();
  }
}

SiddAjmera 6 年前

subscription 类型的变量 Subscription 那可能是 import rxjs 然后 unsubscribe ngOnDestroy

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` 模板中的管道:

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

currentStep$;

constructor(
  private readerServices: ReaderService
) {}

ngOnInit() {
  this.initDocumentData();
  this.currentStep$ = this.readerServices.currentStepObservable;
}

然后在模板中:

{{ this.currentStep$ | async }}

这样,你就不用照顾 退订 Observable

Shivang Gupta 6 年前

在销毁组件(ngOnDestroy lifecycle hook)时,遍历subscriptions数组并对其调用unsubscribe。

-1

Sujay 6 年前

你可以这样做

 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();
 }

从行为主体退订为可观察

async 模板中的管道:

`async` 模板中的管道: