使用异步管道轮询可观察对象吗？

Question

场景：

我有一项每2秒轮询一次URL的服务：

export class FooDataService {

...

  public provideFooData() {
    const interval = Observable.interval(2000).startWith(0);
    return interval
      .switchMap(() => this.http.get(this.requestUrl))
      .map(fooData => fooData.json())
  }
}

现在我有一个要在其中显示此轮询数据的组件：

export class FooComponent implements OnInit {

  constructor(private fooDataService: FooDataService) {}

  public fooData$: Observable<FooData>;

  ngOnInit() {
    this.fooData$ = this.fooDataService.provideFooData();
  }
}

在组件模板中，我将使用异步管道来检索值并将其传递给子组件：

<foo-data-viewer [data]="fooData$ | async"></foo-data-viewer>

此方法的问题：

不能像这样用量角器来实现它（请参阅我的last question on this topic或this article）。所有代码都在ngZone中执行，量角器将等待所有排队的操作完成后再继续。但是Observable.interval()将使无限数量的操作排队，从而导致量角器超时。

常见解决方案：

我最常阅读的修复方法是像这样使用runOutsideAngular：

export class FooComponent implements OnInit, OnDestroy {

  constructor(private ngZone: NgZone,
              private fooDataService: FooDataService) {}

  public fooData: FooData;
  public fooDataSubscription: Subscription<FooData>;

  ngOnInit() {

    this.ngZone.runOutsideAngular(() => {
      this.fooDataSubscription =
        this.fooDataService.provideFooData()
            .subscribe(
               fooData => this.ngZone.run(() => this.fooData = fooData)
            );
    });
  }

  ngOnDestroy(): void {
    this.fooDataSubscription.unsubscribe();
  }
}

通过在ngZone之外运行间隔，量角器在继续之前不会等待轮询完成，因此不会超时。

然而，这意味着：

• 我无法使用async管道，我必须手动订阅。
• 我必须手动管理预订，并在组件销毁时自行清理。
• 我无法保持漂亮干净的Observable风格，并且代码变得更加混乱，尤其是当我有多个轮询服务时。

我的问题：

在ngZone之外运行时间间隔时，有没有办法保持rxjs的功能样式并继续使用异步管道（或等效管道）？

我偶然发现了this github project，看起来确实像我想要的，但是我无法使它正常工作。

我需要的是一个工作示例，可以像在我的场景中那样离开并重新进入区域，而不必自己管理订阅。

场景：我有一个每2秒轮询一次URL的服务：导出类FooDataService {... public ProvideFooData（）{const interval = Observable.interval（2000）.startWith（0）; ...

Answer 1

import { Injectable } from '@angular/core';
import { interval, of, timer } from 'rxjs';
import { startWith, switchMap, delay, map, share, shareReplay } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {
  private fakeRequest$ = timer(1000).pipe(map(() => new Date().getTime()))
  private pollingData$ = interval(2000)
    .pipe(
      switchMap((index) => this.fakeRequest$),
      shareReplay(1)
    )
  constructor() { }

  public getData$() {
    return this.pollingData$;
  }
}