如何防止延迟订阅回调在RxJS中执行?

时间:2019-01-25 19:28:03

标签: angular rxjs

对于涉及订阅问题的帮助,我将不胜感激。我正在尝试防止发生特定事件的情况下延迟订阅调用回调函数,但是我无济于事!

在触发事件处理程序时,我尝试调用.unsubscribe(),但这并没有阻止回调的执行。

这是我的订阅的定义:

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

这是我尝试过的:

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

预先感谢

1 个答案:

答案 0 :(得分:1)

这是使用takeUntilSubject的解决方案。这是关于此技术的article。此模式通常用于自动退订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();
    }
}

希望有帮助!