Angular2 订阅嵌套

Question

问题是这样出现的: 从博客列表进入博客详情的时候, 从url中解析id, 然后根据id获得博客全部信息.
虽然能成功获取到博客, 但是chrome console里会报错, 说Cannot read property 'title' of undefined. 感觉是因为订阅嵌套的原因, 但是不知道应该用什么方式来实现从url获取id然后根据id获取博客本身.

试着并列两个订阅, 一样能运行但是也报错.

// blog-full.component.ts
ngOnInit() {
    this.route.params 
    .subscribe( // 订阅'@angular/route'里的Router的params获取id
      (params: Params) => {
        this.id = params['id'];
        this.blService.getBlog(this.id)
          .subscribe( // 订阅blogService里的getBlog获取博客本身
            (blog:Blog) => {
              this.blog = blog;
              console.warn(this.blog);
            });
      });
}

// blogs.service.ts
getBlog(id: number){
    return this.http.get('https://xxx.example.com/blogs/'+id)
      .map((response:Response) => {
        return response.json().obj;
      })
      .catch((error:Response) => {
        return Observable.throw("error when get one blog");
      });
  }

Answer 1

订阅嵌套不是很优雅，使用rxjs中的mergeMap可以解决你的问题。

具体见：使用rxjs处理多个网络请求

Answer 2

用mergeMap看起来才是正确的方式, 之前嵌套虽然能工作, 但总觉着不是这样的.

// with mergeMap
ngOnInit() {
    this.route.params
      .mergeMap((params: Params) => {
        this.id = params['id'];
        return this.blService.getBlog(this.id);
      })
      .subscribe((blog) => {
        this.blog = blog;
      });
  }

另外console里报错的解决方式是将{{blog.content}}加个问号{{blog?.content}}