如何在 ng-container 中處理具有許多訂閱的 ngrx let 作為 ng-container？

Question

我開始使用ngrx let來使用普通對象。

問題是當我在我的組件中使用很多可觀察對象時，我最終得到的代碼看起來很糟糕（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

您可以使用 RxJS 函數（如combineLatest 、 zip和forkJoin組合控制器中的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不會開始發射，除非每個源 observable 至少發射了一次。 我們可以使用startWith運算符來強制執行它，如下所示。 但是，您需要確保第一個值（此處為null ）不會影響數據綁定。 你當然可以取代*ngrxLet與*ngIf以避免發射null ，但你會失去的好處*ngrxLet 。