使用来自 Observable Angular 2 的数据

Question

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

假设我有一个服务返回一个带有我需要的数据的 Observable，我应该如何正确使用这些数据，就性能而言？

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

2. 如何让 observable 保持最新状态？例如，我有一个表格显示来自 API 的数据。如果我点击第二页（分页），我想打另一个电话并更新 observable。

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

Answer 1

1. 如果您还需要组件中的数据，您可以订阅它。 但是也许你不应该（见下文）...

2. 在那里你可以使用操作符，你可以结合 observables 来定义一个自定义的数据流：

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() 等并命令式地管理他们的订阅，但通常最好不订阅，这样可以避免很多副作用和一些“糟糕，我忘了在这里取消订阅”。通常，您无需订阅即可完成所需的一切。

Observables 用于描述数据流，仅此而已。这是函数式编程的一种范式：你不定义事情是如何完成的，而是定义它们是什么。这里，this.foo$ 是初始 fooService.getData() 和每个可能出现的 fooService.fetchMore() 的组合。