在另一个完成后使一个可观察 [英] Making one observable after the other one is complete

问题描述

我订阅以下可观察的内容:

I subscribe to observable below:

    this.router.events
        .filter(event => event instanceof NavigationEnd)
        .startWith({})
        .pairwise()
        .subscribe((events: [NavigationEnd, NavigationEnd]) => {
            if (
                this.breadcrumbs.length > 0 &&
                events[0].url &&
                events[0].url.split("?")[0] === events[1].url.split("?")[0]
            ) {
                return;
            }
            let root: ActivatedRoute = this.activatedRoute.root;
            this.breadcrumbs = this.getBreadcrumbs(root);

            this.checkSetIsHomePage();
            this.setBreadcrumbHeight();
        });

我想在排名靠前的位置订阅以下可观察的内容:

and I want to subscribe to observable below when the top one is done:

    this.breadcrumbService.additionalBreadcrumbs
        .takeUntil(this.destroy$)
        .subscribe(breadcrumb => {
            if (breadcrumb.index) {
                this.breadcrumbs.splice(breadcrumb.index, 0, breadcrumb);
            } else {
                this.breadcrumbs.push(breadcrumb);
            }

            this.setBreadcrumbHeight();
        });

这是两个独立的可观察对象，我使用了延迟，但我知道这样做不是最佳做法，您会建议如何做呢?

these are two separate observable, I used delay but I know its not the best practice to do that, how would you suggest to do it?

推荐答案

您不应该订阅第一个可观察对象，而应再使用一个运算符最终订阅第二个可观察对象.您想要的运算符是mergemap或switchmap.

You shouldn't subscribe to the first observable, but instead use one more operator to finally subscribe to the second observable. The operator you want is either mergemap or switchmap.

您可以尝试这个吗?

this.router.events
    .filter(event => event instanceof NavigationEnd)
    .startWith({})
    .pairwise()
    .tap((events: [NavigationEnd, NavigationEnd]) => {
        if (
            this.breadcrumbs.length > 0 &&
            events[0].url &&
            events[0].url.split("?")[0] === events[1].url.split("?")[0]
        ) {
            return;
        }
        let root: ActivatedRoute = this.activatedRoute.root;
        this.breadcrumbs = this.getBreadcrumbs(root);

        this.checkSetIsHomePage();
        this.setBreadcrumbHeight();
    })
    .switchMap(() => this.breadcrumbService.additionalBreadcrumbs)
    .takeUntil(this.destroy$)
    .subscribe(breadcrumb => {
        if (breadcrumb.index) {
            this.breadcrumbs.splice(breadcrumb.index, 0, breadcrumb);
        } else {
            this.breadcrumbs.push(breadcrumb);
        }

        this.setBreadcrumbHeight();
    });

您在此处执行的操作是使用Tap运算符来操纵您的"this"(此)每次发射，但您不会更改可观察对象，也不会自己发射.然后切换到第二个可观察到的对象，在第一个可观察对象的每次发射上.

What you do here is use the tap operator to manipulate your "this" on each emit, but you don't change the observable and you don't emit one yourself. Then you switch to the second observable, on each emit of the first.

这篇关于在另一个完成后使一个可观察的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！