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

Question

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

问题是，当我在我的组件中使用了很多可观察对象时，我最终得到了看起来很糟糕的代码(ng-container中的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

您可以使用combineLatest、zip和forkJoin等RxJS函数在控制器中组合可观察对象。每一个都有一个特定的机制，你可以在here上找到它们之间的区别。

使用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的好处。