Angular 2：解析器中的链式 Observable

Question

我是 Angular2 和可观察对象的新手。我正在尝试 return 我的解析器的一系列可观察结果的结果，但找不到关于 SO 的答案。当我 return 只有一个 observable 时一切正常，但当它们被链接时会失败。我已将代码简化为连续两次调用相同的测试函数：

@Injectable()
export class SwResolve implements Resolve<any> {
    constructor(private swService: SwService) {}    
        resolve (route: ActivatedRouteSnapshot): Observable<MyObject> | Promise<any> | any {
             this.swService.getTestData().subscribe(data => {
                 return this.swService.getTestData();
             });
        }
}

Sw组件：

export class SwComponent implements OnInit {constructor(
    private route: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.route.data.forEach((data: any) => {
      // Handle data received
     });
  }
};

软件服务：

  getTestData() {
    return Observable.create(observer => {
      let testObject : SwDataObject = {
        'labels':['value0','value1'],
        'desktop':[123,456],
        'mobile':[789,1011]
      };
      observer.next(testObject);
      observer.complete();
    });
  }

我做错了什么？

谢谢！

编辑 6 月 17 日：添加更多信息，因为我花了一些时间来了解 RxJs 的方法（flatMap、mergeMap 等）。主要原因是因为我只是没有了解它们的功能方面。我鼓励在同一条船上的人看看 Charles Scalfani 的 these excellent series of articles on functional programming。

Answer 1

resolve 函数期望一个 observable 被 returned。你在做什么是不正确的，因为你只是 returning 一个异步结果。您正在调用第一个可观察对象，然后订阅该可观察对象。所以时间流逝，只有当第一个 observable 被解决时，你才 returning 一个 observable。

你应该为这样的东西使用什么（它与 Promise.then（某种）具有相似的行为）是 flatMap/mergeMap（RxJS5 中的别名）。

将您的代码重构为：

@Injectable()
export class SwResolve implements Resolve<any> {
    constructor(private swService: SwService) {}    
        resolve (route: ActivatedRouteSnapshot): Observable<MyObject> | Promise<any> | any {
             return this.swService.getTestData().mergeMap(data => 
                 return this.swService.getTestData();
             );
        }
}

这将做的是 return 立即观察到。

mergeMap 所做的是获取一个事件作为输入（在本例中是您第一次调用 getTestData() 的结果）并期望您 return 另一个可观察对象。在引擎盖下，它将订阅这个可观察到的结果并将结果展平。

mergeMap的文章很多，如果不清楚，建议多看几篇。这是一个好的开始：https://github.com/btroncone/learn-rxjs/blob/master/operators/transformation/mergemap.md

Angular 2：解析器中的链式 Observable

Angular 2 : Chain Observables in Resolver

resolver

observable

typescript

angular