angular - Rxjs 如何在智能组件中等待所有来自动态组件的 observables 完成

Question

你好，

在我的项目中，我想通过单击页面上的按钮进行导出 (PDF)。在我的页面中，我有一个动态创建多个图表的仪表板。当我点击“导出”按钮时，我想通知每个动态组件从当前图表实例创建一个 svg 并将其传递给“页面”组件。为了能够创建 svg，我必须等到创建图表实例。当我拥有来自不同动态组件的所有 svg 时，我能够将信息(不同的 svg)传递给将创建 pdf 的 api 调用的主体。

所以我试图在 test project 中实现这一点.我不知道正确的方法，所以我尝试用动态组件中的 observable 填充服务中的数组。

我遇到的问题是，在登陆页面组件中执行 forkjoin 之前，我如何知道动态组件中的所有可观察对象(当它失败时返回 SVG 或错误)都被添加到数组中。我的 forkJoin 也没有返回 svg，所以我做错了。但也许有更好的方法来等待所有动态组件，直到他们创建他们的 svg。

Answer 1

我认为问题是当chartInstanceStream$发出，它没有订阅者，这意味着它无法完成，因为 first() ，这也意味着 forkJoin除非所有提供的 observable 至少发出一次并完成，否则不会发出。
chartInstanceStream$由于 setChartInstance 发出，发生在 testService.clickExportPdfStream 之前发出。

一种快速解决方法是转 chartInstanceStream成ReplaySubject以便它将其最新值重播给迟到的订阅者。

所以，从这个:

chartInstanceStream$ = new Subject<Highcharts.Chart>();

对此:

chartInstanceStream$ = new ReplaySubject<Highcharts.Chart>(1);

forkJoin内部订阅所有提供的 observables。通过转换 chartInstanceStream$成ReplaySubject ，您要确保迟到的订阅者(来自 forkJoin 的订阅者)将收到由 ReplaySubject 发出的最旧的值。 .

并且因为你的观察结果 forkJoin订阅看起来像这样:

this.chartInstanceStream$.pipe(
    map((chart: Highcharts.Chart) =>
      chart.getSVG()
    ),
    first() // !
  )

由于 first()，当它们发出一个值后，它们也会立即完成。 .