javascript - 使用来自 Observable Angular 2 的数据

Question

首先，我要感谢社区为像我这样的学习者在使用新技术时获得的所有支持。我已经使用 Angular 一段时间了，但有些东西我仍然不太明白，也没有在其他地方看到有人问过。

假设我有一个服务返回一个包含我需要的数据的 Observable，那么在性能方面我应该如何正确使用这些数据？

1. 我知道我可以使用异步管道并避免必须 sub/unsub，但这仅发生在模板中。如果我也需要在组件中使用相同的数据怎么办？不会再次订阅(从带有异步管道的模板和带有 .subscribe() 的组件)吗？

2. 如何使可观察值保持最新？例如，我有一个显示来自 API 的数据的表格。如果我点击第二页(分页)，我想再次调用电话并更新可观察值。

很抱歉，如果之前有人问过这个问题，我个人在 Stackoverflow 上找不到。感谢您的关注!

Answer 1

1. 如果您也需要组件中的数据，只需订阅即可。 但是也许你不应该(见下文)...

2. 您可以在其中使用运算符，可以组合可观察量来定义自定义数据流:

foo$: Observable < Foo[] > ;
randomClickEvent = new Subject < clickEvent > ();

ngOnInit() {
    let initialFetch = this.fooService.getData().share()
    this.foo$ = Observable.merge(
      initialFetch, // need the initial data
      initialFetch.flatMap(foos => { 
        this.randomClickEvent.switchMap(() => { //listen to click events
          return this.fooService.getMore().map((moreFoos: Foo[]) => { //load more foos
            return foos.concat(...moreFoos) //initial foos values + new ones
          })
        })
      })
    );
  }

<span *ngFor="let foo of (foo$|async)">{{foo.name}}</span>
<button (click)="randomClickEvent.next($event)">Load More foos !</button>

大多数人只是使用简单的运算符，如 map()、do() 等，并强制管理他们的订阅，但通常最好不订阅，所以您可以避免许多副作用和一些“哎呀我忘了在这里取消订阅”。通常您无需订阅即可完成所需的一切。

可观察量的存在是为了描述数据流，仅此而已。这是函数式编程的范例:您不定义事情是如何完成的，而是定义它们是什么。这里，this.foo$ 是初始 fooService.getData() 和每个可能发生的 fooService.fetchMore() 的组合。