如何处理 ngrx let 与 ng-container 内的 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">\n    <app-comp1 [data]="context.obs1" \xe2\x80\xa6>\xe2\x80\xa6</app-comp1>\n    <app-comp2 [data]="context.obs2" \xe2\x80\xa6>\xe2\x80\xa6</app-comp2>\n    <app-comp3 [data]="context.obs3" \xe2\x80\xa6>\xe2\x80\xa6</app-comp3>\n</ng-container>\n

\n

Answer 2

combineLatest您可以使用 RxJS 函数（如、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。