Question

我正在寻找在loading bar component上使用observable stream的方法吗？

我有component使用observable显示来自async pipe的数据。此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()在Observable上...

你们采取什么方法来显示加载，没有数据和错误消息与你的流？

Answer 1

您将观察结果传递给<loading-bar>的想法似乎很好。

如果您唯一关心的是避免多次订阅，您有两种选择：

<强> 1。分享原始可观察

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

<强> 2。创建中介BehaviorSubject

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

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

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

代码会像这样（我还没有测试过）：

在课堂上：

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

在模板中：

{{listDataBuffer$ | async}}

其他说明：

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

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

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

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

1 个答案: