前端组件中如何将Observable<boolean[]>拆分为Observable<boolean>[]？

嘿，我来帮你把这段代码拆成你想要的独立Observable形式！首先咱们先理清楚原代码的逻辑：你监听了Redux中userInfo.access.current的变化，然后一次性把四个权限判断结果赋值给对应的布尔变量。现在要把这个单一的订阅拆分成四个独立的Observable<boolean>，每个对应一个权限状态，对吧？

步骤1：先抽取出基础的access流 #

首先，咱们把监听Redux状态的部分单独抽成一个基础Observable，这样后面每个权限流都可以复用它，避免重复监听同一个Redux状态：

// 先创建基础的access$流，包含takeUntil逻辑
const access$ = redux.watch(state => state.userInfo.access.current).pipe(
  takeUntil(this.done)
);

步骤2：为每个权限创建独立的Observable #

接下来，每个canXXX$就可以基于这个access$流，通过map操作符单独处理对应的权限判断。注意哦，原代码里的权限数组有个小问题——EPermission.Worklist出现了两次，我猜第二个应该是EPermission.Services，所以下面的代码我修正了这个点：

// 每个权限对应独立的Observable<boolean>
this.canPartners$ = access$.pipe(
  map(access => access[EPermission.Partner] >= EAccess.Read)
);

this.canServices$ = access$.pipe(
  map(access => access[EPermission.Services] >= EAccess.Read)
);

this.canTens$ = access$.pipe(
  map(access => access[EPermission.Tens] >= EAccess.Read)
);

this.canWorklist$ = access$.pipe(
  map(access => access[EPermission.Worklist] >= EAccess.Read)
);

可选：保持数组解构的写法 #

如果你还是想沿用原代码的数组解构风格，也可以把四个流放进数组里一次性解构，这样和原代码的映射逻辑更贴近：

[this.canPartners$, this.canServices$, this.canTens$, this.canWorklist$] = [
  EPermission.Partner,
  EPermission.Services,
  EPermission.Tens,
  EPermission.Worklist
].map(permission => 
  access$.pipe(map(access => access[permission] >= EAccess.Read))
);

这种拆分方式的好处是每个权限状态都是独立的流，你可以在组件里单独订阅某个权限，或者在模板中用async管道单独绑定（比如*ngIf="canPartners$ | async"），比原来一次性订阅所有权限更灵活，也更符合RxJS的流处理理念。

内容的提问来源于stack exchange，提问作者Alex Rempel