Angular 2：使用Observable流加载bar组件

我正在找一种方法在observable stream上使用loading bar component？Angular 2：使用Observable流加载bar组件

我有一个component，它使用async pipe显示来自observable的数据。这个Observable也可以处理数据，比如使用map。

目前我有这样的组件：

this.listData$ = this.http.get('/itemList') 
      .map(data => this.manipulate(data))

和模板：

{{listData$ | async}}

服务器可以为empty []，'unavailable'或项目的array返回数据。

我怎样才能进入流并提供加载组件，在加载数据时显示加载栏，并在空或不可用时显示错误消息？沿着线的东西...

this.listData$ = this.http.get('/itemList') 
       //.something here?? 
       .map(data => this.manipulate(data)) 


<loading-bar [data]='listData$' [noDataMsg]='"no data"' [errorMsg]='unavailable'> 
    {{listData$ | async}} 
</loading-bar>

理想我想用async pipe，以保持和我的组件不同意。但是，将Observable传递给加载条组件并在其中订阅，这使得2 http calls ...然后我需要。 share()可观测...

什么方法做你们拿显示加载，没有任何数据，并与您的流错误信息？

来源

2017-02-16 Thibs

其实你可以使用一些'loading'标志，并设置为true之前HTTP和假里面'地图'，如果你想避免订阅。所以，你可以装听'loading'变量状态 – VadimB

您可以用'do'运营商，它可以让您无需使用地图添加一个操作，像'this.http.get（...）。做（负荷= FALSE）。 map（... => ...）;' – Supamiu

你的想法通过观察到<loading-bar>似乎很好。

如果你唯一的问题是避免多个订阅，你有两个选择：

1.共享原始观察的

this.listData$ = this.http.get('/itemList') 
        .map(data => this.manipulate(data)) 
        .share();

2.创建一个中介BehaviorSubject

该主题将充当原始可观察模板与模板之间的“缓冲区”：

您将原始obs的值传递到BehaviorSubject中。
您的模板订阅（通过async）您的BehaviorSubject。

从模板中仍然可以有多个订阅，但它们对于您的主题。但是，原始观察者只能由您的主题订阅（这意味着HTTP请求只执行一次）。

的代码会去是这样的（我没有测试过）：

在类：

this.listDataBuffer$ = new BehaviorSubject<any>(null); 
this.listData$.subscribe(listDataBuffer$);

在模板：

{{listDataBuffer$ | async}}

其他注意事项：

你说你的原始观测的发出一个阵列的项目。这意味着它是一个二元操作：要么有所有的项目，要么没有。通过此配置，您将永远无法显示进度。您只能在两种状态之间切换，“加载”和“完成”。
无需使用在你输入[ ]当你传递字符串文字：

// YOUR CODE: 
<loading-bar [noDataMsg]='"no data"' [errorMsg]='"unavailable"'> 

// COULD BE: 
<loading-bar noDataMsg="no data" errorMsg="unavailable">

来源

2017-02-16 14:47:53 AngularChef

Merci！这似乎是合理的建议，我会在今天晚些时候尝试这些概念并报告。 – Thibs

望着这接近：this.listDataBuffer $ =新BehaviorSubject （NULL）; this.listData $ .subscribe（listDataBuffer $）;现在不是说我需要在onDestroy中取消订阅listData $吗？我假设使用.share（）比创建一个主题并且不必担心取消订阅还是缺少一些东西？再次感谢 – Thibs

你是完全正确的。按照http://stackoverflow.com/a/40819423/1153681。回顾一下，我的解决方案看起来好像过火了，我会相应地更新我的答案。 – AngularChef

Angular 2：使用Observable流加载bar组件

回答

相关问题