typescript - Angular RxJS: Behöver jag göra .takeUntil(this.destroy$) om jag använder async pipe?

Om jag har ett element i min mall som använder egenskapsbindning, bundet till en observable, och använder async-pipe för att säkerställa att den avprenumereras automatiskt... skulle det då vara onödigt att använda takeUntil(this.destroy$)?

Mallutdrag:

<input name="SomeElement"
    [ngModel]="boundObservable$ | async">
</input>

Komponent :

export class MyComponent implements OnDestroy {
  destroy$: Subject<any> = new Subject<any>();

  boundObservable$ = this.sourceObservable$.pipe(
    takeUntil(this.destroy$),
    map(this.transformData)
  );

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

Svar #1

TL;DR - Ingen anledning till det eftersom async-röret gör det automatiskt när komponenten förstörs.

Detaljerna

Som nämnts i Angular-dokumentationen:

Den asynkrona pipen prenumererar på en Observable eller Promise och returnerar det senaste värde den har skickat ut. När ett nytt värde skickas ut markerar den asynkrona pipen komponenten för att kontrolleras för förändringar. När komponenten förstörs avregistrerar den asynkrona pipen automatiskt för att undvika potentiella minnesläckor.

Här är källkoden på hur async-pipen hanterar det:

  // Create Subscription: _subscribe is called from the pipe's `transform` function:
  private _subscribe(obj: Subscribable<any>|Promise<any>|EventEmitter<any>): void {
    this._obj = obj;
    this._strategy = this._selectStrategy(obj);
    this._subscription = this._strategy.createSubscription(
        obj, (value: Object) => this._updateLatestValue(obj, value));
  }

  // Dispose Subscription:
  ngOnDestroy(): void {
    if (this._subscription) {
      this._dispose();
    }
  }

  private _dispose(): void {
    this._strategy.dispose(this._subscription!);
    this._latestValue = null;
    this._subscription = null;
    this._obj = null;
  }

Där den använda strategin är en av två klasser som implementerar SubscriptionStrategy-gränssnittet:

interface SubscriptionStrategy {
  createSubscription(async: Subscribable<any>|Promise<any>, updateLatestValue: any): Unsubscribable
      |Promise<any>;
  dispose(subscription: Unsubscribable|Promise<any>): void;
  onDestroy(subscription: Unsubscribable|Promise<any>): void;
}

class SubscribableStrategy implements SubscriptionStrategy {
  createSubscription(async: Subscribable<any>, updateLatestValue: any): Unsubscribable {
    return async.subscribe({
      next: updateLatestValue,
      error: (e: any) => {
        throw e;
      }
    });
  }

  dispose(subscription: Unsubscribable): void {
    subscription.unsubscribe();
  }

  onDestroy(subscription: Unsubscribable): void {
    subscription.unsubscribe();
  }
}

class PromiseStrategy implements SubscriptionStrategy {
  createSubscription(async: Promise<any>, updateLatestValue: (v: any) => any): Promise<any> {
    return async.then(updateLatestValue, e => {
      throw e;
    });
  }

  dispose(subscription: Promise<any>): void {}

  onDestroy(subscription: Promise<any>): void {}
}

Relaterade artiklar