Angular 组件中未调用 RxJs 计时器订阅答案

【问题标题】：RxJs timer subscribe not called in Angular componentAngular 组件中未调用 RxJs 计时器订阅
【发布时间】：2021-08-24 11:18:38
【问题描述】：

Rxjs 计时器的订阅回调不会在 Angular 组件中调用。该代码似乎可以通过节点在简单的打字稿文件中正常工作，但在角度组件中却无法正常工作。

这是在节点中工作的代码

import { timer, Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';

function watchForJSFilesLoad() {
  let _stop = new Subject<void>();
  let observable$ = timer(0, 500).pipe(
    map((n) => <any>{n}),
    takeUntil(_stop)
  );

  observable$.subscribe((n) => {
    console.log(n.n);
    if (n.n == 50) {
      console.warn('stop polling.')
      _stop.next();
    }
  });
}

watchForJSFilesLoad();

这里是角度组件代码，本质上是一样的

export class TestComponent implements OnInit {
  @ViewChild("pdfViewer") pdfViewer: PdfJsViewerComponent;
  @Input() pdfUrl: any;

  ngOnInit() {
    console.warn("inline rendering component loaded");
    this.watchForJSFilesLoad();
  }

  watchForJSFilesLoad() {
    console.warn("watch for js files load");
    let _stop = new Subject<void>();
    let observable$ = timer(0, 1000).pipe(
      map(() => <any>{}),
      takeUntil(_stop)
    );

    observable$.subscribe(() => {
      console.log("checking if loaded");
      if (condition) {
        console.warn("stop polling.");
        _stop.next();
      }
    });
  }

}

我在订阅中看不到控制台日志。我错过了什么吗？

谢谢。

rxjs@6.2.2

【问题讨论】：

您的代码没有任何“错误”。它应该可以工作，所以我想如果你尝试在 stackblitz 中制作一个最小的可重现示例会更好
这段代码应该可以工作，至少它会打印一次checking if loaded。检查你一次condition。
它正在打印watch for js files load。但它甚至不会打印一次checking if loaded。

标签： angular rxjs

【解决方案1】：

我刚刚将上面的代码复制到 Stackblitz 中，它的工作原理是：

它正在显示“检查是否已加载”。那么也许其他地方还有其他问题？

您可以在这里找到堆栈闪电战：https://stackblitz.com/edit/angular-so-210824-deborahk

【讨论】：

它在 stackblitz 上也对我有用。我正在尝试向 stackblitz 添加更多内容，使其尽可能接近原始组件，以便我可以在这里分享它以获得更好的想法。很快就会更新。