Angular7：如何在Observable中返回Observable及重写服务方法按需返回数据

嘿，我来帮你解决这两个Angular Observable相关的问题，都是RxJS开发里很常见的场景～

在Angular中，我们依赖RxJS处理异步数据流，你完全不需要手动创建新的Observable来包裹另一个，直接用高阶映射操作符就能优雅实现这个需求。这类操作符可以让你在一个Observable的数据流中，返回另一个Observable，并自动把它的结果合并到当前流里。

举个实际的例子：假设你需要先获取用户ID，再用这个ID请求用户详情：

// 模拟获取用户ID的Observable
getUserId(): Observable<number> {
  return of(123);
}

// 根据ID请求用户详情的API
getUserDetails(userId: number): Observable<User> {
  return this.http.get<User>(`/api/users/${userId}`);
}

// 组合两个Observable，最终返回用户详情流
getUser(): Observable<User> {
  return this.getUserId().pipe(
    switchMap(userId => this.getUserDetails(userId))
  );
}

不同的高阶操作符有不同的适用场景，你可以按需选择：

• switchMap：如果源Observable有新值发射，会立即取消之前的内部Observable订阅（适合搜索框输入这类需要取消旧请求的场景）
• mergeMap：同时订阅多个内部Observable，结果按发射顺序合并（适合并行请求且不关心返回顺序的场景）
• concatMap：按顺序订阅内部Observable，前一个完成才会订阅下一个（适合需要严格顺序执行的请求）
• exhaustMap：忽略源Observable的新值，直到当前内部Observable完成（适合避免重复提交表单的场景）

先说说你当前代码的问题：手动创建Observable时，没有正确把super.read(filter)的数据发射到新的Observable中，而且手动创建Observable很容易忽略错误处理、取消订阅这些细节。其实用RxJS的内置操作符就能写出更简洁健壮的代码。

最优实现方式 #

你可以直接利用pipe和map操作符，根据isSelectable的状态决定是否转换数据，完全不需要手动创建新的Observable：

read(isSelectable: boolean): Observable<IFailureMode> {
  // 先获取基类返回的原始Observable
  const baseStream = super.read(filter); // 这里假设`filter`是你已经定义好的变量

  if (isSelectable) {
    // 需要映射数据时，用map操作符转换结果
    return baseStream.pipe(
      map(data => this.mapToSelectableModel(data))
    );
  } else {
    // 不需要映射，直接返回原始Observable即可
    return baseStream;
  }
}

如果filter需要根据isSelectable动态调整，也可以把逻辑整合到一个pipe里：

read(isSelectable: boolean): Observable<IFailureMode> {
  // 根据状态生成对应的过滤条件
  const targetFilter = isSelectable ? /* 你的可选过滤规则 */ : /* 默认过滤规则 */;

  return super.read(targetFilter).pipe(
    // 只有isSelectable为true时才执行映射，否则用tap做空操作（不修改数据流）
    isSelectable ? map(data => this.mapToSelectableModel(data)) : tap(() => {})
  );
}

关于你问的「如何用observable.next返回」 #

虽然不推荐手动创建Observable，但如果一定要这么做，你需要订阅super.read(filter)，然后在回调里把数据发射到新的Observable中，同时要处理错误、完成事件，还要返回取消订阅的函数避免内存泄漏：

read(isSelectable: boolean): Observable<IFailureMode> { 
  return new Observable<IFailureMode>(subscriber => { 
    // 订阅基类的Observable
    const sub = super.read(filter).subscribe({
      next: (data) => {
        // 根据状态决定发射原始数据还是映射后的数据
        const output = isSelectable ? this.mapToSelectableModel(data) : data;
        subscriber.next(output);
      },
      error: (err) => subscriber.error(err), // 传递错误事件
      complete: () => subscriber.complete() // 传递完成事件
    });

    // 返回取消订阅的函数，当外部取消订阅时，同时取消内部的订阅
    return () => sub.unsubscribe();
  }); 
}

但这种写法比用操作符的方式繁琐得多，也更容易出错，所以优先推荐前面的最优实现。

内容的提问来源于stack exchange，提问作者Mostafa Farhani