Question

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

 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)订阅路由params停止时出错。因此，我只需要返回空的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));
}

Answer 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的工作原理

Angular 2 chain route params和http subscriptions

1 个答案: