2

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

@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();
             });
        }
}

组件：

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 ）关于函数式编程的这些优秀系列文章。

4

1 回答 1

4

resolve 函数期望返回一个 observable。你所做的不正确，因为你只返回一个异步结果。您正在调用第一个可观察对象，然后订阅该可观察对象。所以时间过去了，只有当第一个 observable 被解决时，你才返回一个 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();
             );
        }
}

这将立即返回一个可观察对象。

mergeMap 所做的是获取一个事件作为输入（在这种情况下是您的第一个 getTestData() 调用的结果）并期望您返回另一个可观察的。在引擎盖下，它将订阅这个 observable 并将结果展平。

有很多关于 mergeMap 的文章，所以如果不清楚，我建议你阅读一些。这是一个好的开始：https ://github.com/btroncone/learn-rxjs/blob/master/operators/transformation/mergemap.md

于 2016-10-25T15:44:18.763 回答