如何从RxJS可观察对象检索最新状态?
在这种情况下,如何从RxJS可观察对象检索最新状态?,rxjs,observable,ngrx,angular2-observables,Rxjs,Observable,Ngrx,Angular2 Observables,在这种情况下,searchQuery$是一个RxJS可观察的。我知道当用户界面上的搜索查询字符串发生变化时,这个可观察的会发出变化 我向这个控件引入了另一个名为paging$的Observable来执行分页。此可观察发出页码。当页面更改时,我必须再次调用服务器来检索剩余的书籍 当我在用户单击页面时调用服务器时,我有页码,因为它直接来自用户界面,而不是searchQuery$Observable发出的搜索字符串 如何结合使用RxJS将searchQuery$和paging$检索搜索字符串和页码 更
searchQuery$
是一个RxJS可观察的
。我知道当用户界面上的搜索查询字符串发生变化时,这个可观察的会发出变化
我向这个控件引入了另一个名为paging$
的Observable
来执行分页。此可观察
发出页码。当页面更改时,我必须再次调用服务器来检索剩余的书籍
当我在用户单击页面时调用服务器时,我有页码,因为它直接来自用户界面,而不是searchQuery$
Observable发出的搜索字符串
如何结合使用RxJS将searchQuery$
和paging$
检索搜索字符串和页码
更新:
活动:
用户在搜索框中键入an
将显示前10本书
用户现在单击下一个分页按钮
接下来的10本书应该显示出来(在http请求和最后一个搜索字符串an
之后)
来自ngrx示例的代码:
导入'rxjs/add/operator/let';
导入'rxjs/add/operator/take';
从'@angular/core'导入{Component,ChangeDetectionStrategy};
从'@ngrx/Store'导入{Store};
从“rxjs/Observable”导入{Observable};
从“../reducers”以root格式导入*;
从“../actions/book”导入*作为book;
从“../models/Book”导入{Book};
@组成部分({
选择器:“bc查找书本页”,
changeDetection:ChangeDetectionStrategy.OnPush,
模板:'
'
})
导出类FindBookPageComponent{
searchQuery$:可观察;
书籍美元:可见;
加载$:可观察;
构造函数(私有存储:存储){
this.searchQuery$=store.select(fromRoot.getSearchQuery).take(1);
this.books$=store.select(fromRoot.getSearchResults);
this.loading$=store.select(fromRoot.getSearchLoading);
}
搜索(查询:字符串){
this.store.dispatch(newbook.SearchAction(query));
}
}
您可以使用:
*如果您的代码与ngrx示例相同,您必须从searchQuery$
上的存储选择中删除take(1)
,这是否意味着任何可观察对象都将保持其最新状态,并且可以如上所述检索?不是任何可观察对象,但是如果你在你的商店里有一个select
-语句,那么情况就是这样的。另外:combinelateest
将保存给定观测值的最新状态,并在其中一个观测值发出数据时发出一个包含所有最新状态的数组。我想我不理解你的问题——以防万一你已经构建了你的数据库示例在示例应用程序之上,您当然必须在选择商店后删除take(1)
,因为这只会触发商店的更新一次。每当用户在搜索输入中键入内容时,商店都会使用searchQuery进行更新-如果没有输入任何内容,则它只是一个空字符串。是的,你测试过我的解决方案了吗?在这种情况下应该有效。否决票不是我的,而是关于您问题的提示:请直接在stackoverflow上包含代码,因为外部代码可能会随着时间的推移而更改,或者可能会脱机,或者链接可能会断开。
updateBooks$ = Observable.combineLatest(
this.searchQuery$,
this.paging$
).do(([searchQuery, paging]: [string, number]) => {
...makeServerRequest or dispatch an action here
});
updateBooks$
// when subscribing in a component directly, don't forget to handle component-destructions: http://stackoverflow.com/questions/42490265/rxjs-takeuntil-angular2-components-ngondestroy
.takeUntil(destroyed$)
.subscribe();