Angular& RxJS - 使用来自另一个流

时间:2018-03-23 07:55:31

标签: angular rxjs reactive-programming

我对理解Reactive Programming和合并Streams有点失落。让我们在最后一个流中合并一些流:

 private pageByScroll$ = Observable.fromEvent(window, 'scroll')
    .map(() => window.scrollY)
    .filter(current => current >=  document.body.clientHeight - window.innerHeight)
    // Solo cuando el usuario para de hacer scroll por 200 ms
    .debounceTime(200)
    .distinct()
    .map(y => Math.ceil((y + window.innerHeight) / (this.itemHeight * this.ServicioDatos.elementosPorPagina)));

private pageByResize$ =  Observable.fromEvent(window, 'resize')
    .debounceTime(200)
    .map(_ => Math.ceil(
        (window.innerHeight + document.body.scrollTop) / (this.itemHeight * this.ServicioDatos.elementosPorPagina)
    ));

private pageByManual$ = new BehaviorSubject(1);

private pageToLoad$ = Observable.merge(this.pageByManual$, this.pageByScroll$, this.pageByResize$)
    .distinct();

我从example获取此代码,我试图完全理解它,修改并添加更多代码。

现在我可以订阅pageToLoad$来获取合并流生成的页码,它运行完美,并在生成时给我所需的值。但是我有另一个方法从HttpClient返回一个Observable,它调用我的API服务器并获取结果表单数据库。我一直在尝试使用pageToLoad$中的值来发送到服务器(没有任何作用)。

这是我的api通话方法:

public loadPageOfEmpresas(pageNumber: number): Observable<any> {
    this.loadingMore = true;
    return this.apiService.getEmpresas(
        this.elementosPorPagina + '.' + pageNumber, this.app, 'es', this.latitude, this.longitude, null
    ).map(
        empresa => {
            return this.valueToEmpresa(empresa);
        },
        error => {
            throw new DOMException();
    });
}

我想我需要以某种方式合并两个Observable,但是无法获得有关如何使用第一个值在第二个上合并第二个值的信息。你能告诉我我必须采取哪种方式?为什么?

非常感谢

1 个答案:

答案 0 :(得分:1)

我想您希望在页码更改时随时调用http服务,即pageToLoad$发出的任何时间。

如果是这种情况,那么您可能想尝试类似

的内容
pageToLoad$
.switchMap(pageNumber => loadPageOfEmpresas(pageNumber))

switchMap是一个RxJs运算符,它基本上执行以下操作:源observable发出的任何时候,在这种情况下pageToLoad$,将控件传递给它作为参数接收的observable,在这种情况下由{返回的observable {1}},并完成以前创建的任何observable。

所以,如果你订阅了switchMap返回的observable,那么你应该拥有你想要的东西。

您可以read here了解更多详情。

顺便说一句,我看到你将2个参数传递给loadPageOfEmpresas运算符,最后一个是处理错误条件的函数。我认为这是不可能的。 map运算符不接受第二个参数作为处理错误的函数。