Angular 2 链式路由参数和 http 订阅答案

【问题标题】：Angular 2 chain route params and http subscriptionsAngular 2 链式路由参数和 http 订阅
【发布时间】：2016-12-21 16:55:00
【问题描述】：

我正在尝试获取路由参数，然后从服务中获取数据

 this.route.params
   .switchMap(params => this.service.getData(params['id']))
   .subscribe(value => this.value = value,
     error => console.log(error));

这工作正常，直到第一个错误。出现错误后，此行不再调用 params => this.noteService.GetParams(params['id'])。

我可以写这样的东西，但我认为有更好的方法

  this.route.params.subscribe(
    params => {
      this.service.getData(params['id']).subscribe(
        result => console.log(result),
        error => console.log(error))
  });

我的服务

public getData(id): Observable<any> {
  return this.http.get('api/data/' + id)
    .map(data => data.json())
    .catch(error => Observable.throw(error));
 }

更新这个answer 帮助我了解发生了什么。当我调用Observable.throw(error) 订阅路由参数时，会因错误而停止。因此，我只需要返回空的 observable，而不是抛出错误。

my.component.ts

this.route.params
  .switchMap(params => this.service.GetData(params['id']))
  .subscribe(result => {
    if (result) this.data = result; 
    else console.log('error');
  });

my.service.ts

public GetData(id): Observable<any> {
   let url = 'api/data' + id;
   return this.http.get(url)
    .map(data => data.json())
    .catch(error => Observable.of(null));
}

【问题讨论】：

你遇到了什么错误？
504（网关超时）

标签： http angular rxjs observable

【解决方案1】：

我现在正在构建一个 github 用户应用程序并且遇到了同样的问题。这是一个适合我的解决方案：

users.service.ts

public getByUsername(username: string): Observable<any[]> {
        return this.http
            .get(`${this.url}/${username}`)
            .map((res: Response) => res.json());
    }

user.component.ts

ngOnInit() {
        this.sub = this.route.params
            .flatMap((v: any, index: number) => {
                return this.usersService.getByUsername(v.name);
            })
            .subscribe(data => this.user = data);
    }

所以，基本上flatMap operator 可以解决问题。这是link另一个问题，帮助我弄清楚链接 RxJS Observables 是如何工作的

【讨论】：