2017-04-03 89 views
0

首先,我要感谢像我一样的支持学习者在使用新技术时获得的社区。 我一直在使用Angular一段时间,还有一些我还是不太明白,也没有看到其他地方问过。使用来自Observable Angular 2的数据

假设我有一个服务使用我需要的数据返回Observable,应该如何在性能方面正确使用这些数据?

  1. 我知道我可以使用异步管道和避免分/混蛋,但这只是在模板发生。如果我需要在组件中使用相同的数据会怎样?不会再次订阅(从具有异步管道的模板和具有.subscribe()的组件)?

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

对不起,如果这之前已经问过,我个人无法找到如果在Stackoverflow上。感谢您的关注!

+0

这就是为什么Observable的操作符是:组合观察对象... – n00dl3

+0

嗨,谢谢你的回复。有没有可以为这些情况提供的例子? – anazard

+0

我正在处理它,请耐心等待... – n00dl3

回答

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()的组合。

+0

非常有趣...我认为再次订阅Observable会是一种浪费资源,但看起来这是要走的路... 我会尝试这种方法来重新获取值。 非常感谢您的回复! – anazard