angular - 在使用 URL 参数加载页面之前等待 ngrx 操作

Question

我正在使用 ngrx 构建一个 ng2 应用程序。当应用程序启动时，将调用网络服务以获取初始数据，获取此数据后，我将创建一个INIT_DONE 操作。

我的状态是这样的:

export interface State {
  documents: Document[];
  selectedDocument: Document
}

当我转到页面/mypage/456 时，其中 456 是一个 url 参数，我需要获取一些已提取的数据，因此我得到了这样的 URL 参数:

ngOnInit() {
  this.paramSubscription = this.route.params
    .select<string>('id')
    .map((id) => new SelectAction(id))
    .subscribe(this.store);
}

SELECT_ACTION 在获取的数据中查找元素并设置 selectedDocument。问题是 SELECT_ACTION 在 INIT_DONE 之前创建，此时 documents 是空的。

如何在加载页面之前等待 INIT_DONE？

Answer 1

我会使用 combineLatest运算符，因为它结合了多个源流的最新值。此外，我会使用过滤器仔细检查文档是否已设置(这里我假设它是一个数组)。

ngOnInit() {
  this.subscription = Observable.combineLatest(
      this.store.select("documents")
          .filter(documents => documents.length > 0),
      this.paramSubscription = this.route.params
          .select<string>('id')
  )
  .map((combinedData: [Object[], string]) => combinedData[1])
  .subscribe(this.store);
}

还将订阅分配给一个变量，以便您可以在组件销毁时取消订阅。否则，您的订阅将在组件被销毁后存在，并且您的操作可能仍会发出:

ngOnDestroy() {
    this.subscription.unsubscribe();
}