如何在 ng-container 中处理带有多个订阅的 ngrx let 作为 ng-container？

Question

我开始使用 ngrx let 来使用普通对象。

问题是，当我在组件中使用大量可观察量时，我最终得到的代码看起来很糟糕（ng-container inside ng-container inside ng-container inside ng-container ...）：

<ng-container *ngrxLet="obs1$ as obs1">
 <ng-container *ngrxLet="obs2$ as obs2">
  <ng-container *ngrxLet="obs3$ as obs3">
   <ng-container *ngrxLet="obs4$ as obs4">

    <app-comp [data]="obs1" ..>..</app-comp>
    <app-comp2 [data]="obs1" [data2]="obs3"..>..</app-comp2>
    <app-comp3 [data]="obs1" ..>..</app-comp3>
    <app-comp4 [data]="obs1" ..>..</app-comp4>
    <app-comp5 [data]="obs4" [data11]="obs1" ..>..</app-comp5>
    <app-comp6 [data]="obs2" ..>..</app-comp6>
    <app-comp7 [data]="obs3" ..>..</app-comp7>
  </app-number>
</ng-container>

有更好的方法来处理这种语法吗？

Answer 1

<ng-container *ngrxLet="{obs1: obs1$, obs2: obs2$, obs3: obs3$} as context">
    <app-comp1 [data]="context.obs1" ..>..</app-comp1>
    <app-comp2 [data]="context.obs2" ..>..</app-comp2>
    <app-comp3 [data]="context.obs3" ..>..</app-comp3>
</ng-container>

Answer 2

ngrxLet 似乎不支持该功能，您可以使用前面答案中提到的combineLatest 或尝试一些我与 *ngIf 一起使用的 trcik

<ng-container *ngIf="{
  obs1: obs1$ | async,
  obs2: obs2$ | async,
  obs3: obs3$ | async,
  obs4: obs4$ | async
} as data">
    <app-comp [data]="data.obs1"></app-comp>
    <app-comp2 [data]="data.obs1" [data2]="data.obs3"></app-comp2>
    <app-comp3 [data]="data.obs1"></app-comp3>
    <app-comp4 [data]="data.obs1"></app-comp4>
    <app-comp5 [data]="data.obs4" [data11]="data.obs1"></app-comp5>
    <app-comp6 [data]="data.obs2"></app-comp6>
    <app-comp7 [data]="data.obs3"></app-comp7>
</ng-container>

Answer 3

您可以使用 RxJS 函数（如

combineLatest

、

zip

 和 

forkJoin

）组合控制器中的可观察量。每个都有特定的机制，您可以在

这里找到它们之间的差异。

插图使用

combineLatest

控制器

combined$: Observable<any>;

ngOnInit() {
  this.combined$ = combineLatest(
    obs1$.pipe(startWith(null)),
    obs2$.pipe(startWith(null)),
    obs3$.pipe(startWith(null)),
    obs4$.pipe(startWith(null))
  ).map(([obs1, obs2, obs3, obs4]) => ({  // <-- `map` emits a user-friendly object
    obs1: obs1,
    obs2: obs2,
    obs3: obs3,
    obs4: obs4
  }));
}

模板

<ng-container *ngrxLet="combined$ as data">
  <app-comp [data]="data?.obs1" ..>..</app-comp>
  <app-comp2 [data]="data?.obs1" [data2]="data?.obs3"..>..</app-comp2>
  <app-comp3 [data]="data?.obs1" ..>..</app-comp3>
  <app-comp4 [data]="data?.obs1" ..>..</app-comp4>
  <app-comp5 [data]="data?.obs4" [data11]="data?.obs1" ..>..</app-comp5>
  <app-comp6 [data]="data?.obs2" ..>..</app-comp6>
  <app-comp7 [data]="data?.obs3" ..>..</app-comp7>
</ng-container>

但是有一个警告。除非每个可观察源至少发射一次，否则

combineLatest

 和 

zip

 不会开始发射。我们可以使用 

startWith

 运算符强制执行它，如下所示。但是您需要确保第一个值（此处为

null

）不会影响数据绑定。您当然可以将 

*ngrxLet

 替换为 

*ngIf

 以避免发出 

null

，但这样您就会失去 

*ngrxLet

 的好处。