Как предотвратить обратный вызов отложенной подписки в RxJS?

Question

Буду признателен за помощь в решении проблемы с подписками. Я пытаюсь предотвратить вызов функции обратного вызова по отложенной подписке в случае, если происходит определенное событие, но я не могу удержаться от того, чтобы сделать это!

Я пытался вызвать .unsubscribe(), когда сработал обработчик события, но это не помешало выполнению обратного вызова.

Вот определение моей подписки:

this.sub = Observable
    .of(true)
    .pipe(
         delay(2000)
    )
    .subscribe(() => {
        foo()
    });

И вот что я попробовал:

this.elRef.nativeElement.onmouseover = () => {
    if (this.sub) {
      this.sub.unsubscribe();
    }
};

Заранее спасибо

Answer 1

Вот решение с использованием takeUntil и Subject.Вот статья об этой технике.Этот шаблон часто используется для автоматической отмены подписки на ngOnDestroy.

import { Component, OnDestroy } from '@angular/core';
import { Observable, of, Subject } from 'rxjs';
import { delay, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnDestroy  {
    destroy$: Subject<boolean> = new Subject<boolean>();

    sub = of(true)
        .pipe(
            delay(2000),
            takeUntil(this.destroy$)
        )
        .subscribe(() => {
            this.foo();
        });

    onMouseOver(): void {
        this.destroy$.next(true);
    }

    ngOnDestroy(): void {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
}

Надеюсь, это поможет!