更新其他组件

Question

您好，当数据库被修改时，您正在尝试寻找更新组件视图的最佳方式，

目前我订阅了一个 observable 以获取所有记录

   getBlogs(){
       return this._http.get(this.blogsURL+'blogs')
                  .map((result: Response ) => {
                  this.blogs = result['blogs'];
                    return this.blogs;
                   })
   }

然后

this.blogsService.getBlogs()
    .subscribe((res)=>{
      this.blogs = res;
      console.log(res)
    })

这很好，但是当记录更新时，组件中的视图不会。 我可以通过一个主题来解决这个问题，当 getBlogs 和 update blogs 函数被触发时更新它

this.populateList = new Subject<Blog[]>();
this.populateList.next(blogs)

然后订阅，所以我最终得到了这样的东西？

  this.blogsService.getBlogs()
    .subscribe((res)=>{
     // this.blogs = res;
      //console.log(res)
    })

  this.blogsService.populateList
        .subscribe((res)=>{
          this.blogs = res;
          console.log(res)
        })

但我想将它全部集中到一个订阅中，也许是mergeMap switchMap？ 希望这是有道理的

Answer 1

如果您只是想asynchronously 将来自服务的 Observable 响应绑定到您的视图，那么根本不要在组件中订阅该 observable。只需调用返回可观察（和映射）值的服务。然后在视图中使用async 管道动态显示数据。因此，每次发出另一个值或观察到的数据发生变化时，它都会在视图中自动更新。

this.myBlogs = this.blogsService.getBlogs();

在模板中，

<div [innerHTML]="myBlogs | async"></div>

希望您可以利用这个想法来获得最终结果。如果这不是您想要的，请发表评论。