使用来自Observable Angular 2的数据

时间:2017-04-03 14:05:20

标签: javascript angular typescript frontend

首先,我要感谢社区所有像我这样的支持学习者在使用新技术时获得的。 我一直在使用Angular一段时间了,还有一些我仍然不太了解的东西,也没有在其他地方问过。

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

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

  2. 如何使观察到最新?例如,我有一个显示API数据的表。如果我点击第2页(分页),我想再打一次电话并更新观察结果。

  3. 如果之前有人询问我很抱歉,我个人在Stackoverflow上找不到。谢谢你的关注!

1 个答案:

答案 0 :(得分:1)

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

  2. 在那里使用运算符,您可以组合使用observable来定义自定义数据流:

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