angular - 从 this.router.events.subscribe() 中获取多个项目

Question

我目前正在订阅路由器事件，以便在路由更改时更改我的页面标题，就像这样

this.routerSub$ = this.router.events
    .filter(event => event instanceof NavigationEnd)
    .map(() => this.activatedRoute)
    .map(route => {
        while (route.firstChild) route = route.firstChild;
        return route;
    })
    .filter(route => route.outlet === 'primary')
    .mergeMap(route => route.data)
    .subscribe((event) => {
        title = event['title']
            ? `${event['title']}`
            : 'Default Title'
        this.title.setTitle(title);
    });

我的问题是，在某些情况下，我想将标题设置为 url(路由的一部分)中的值。我该怎么做？我知道我不能订阅 url 和事件，但我很难弄清楚要在里面映射什么。

这是我尝试失败的方法

   this.router.events
        .filter(event => event instanceof NavigationEnd)
        .map(() => {
            return this.activatedRoute
        })
      .switchMap(route => {
        return route.data.combineLatest(route.url, (data, url) => {
            return data['title'] ? `Title: ${data['title']}` : url.join('');
        });
    })

在 .switchMap 行，route 是 ActivatedRoute 类型，route.data 是 Object 类型，我在 combineLatest() 行得到的错误是

route.data.combineLatest is not a function

Answer 1

如果我们撇开 Angular 路由细节不谈，您基本上想要组合来自两个不同流的值。至少有几种方法可以做到这一点。

案例 1。您希望在任何一个流发出时更新标题并使用两个流中的最新值。

使用combineLatest :

const getTitle$ = (activatedRoute) => {
    return activatedRoute.url
        .combineLatest(activatedRoute.data, (url, data) => {
            return url + data;
        });
};

const url = Rx.Observable.interval(400).take(3).map(x => `url_${x} `);
const data = Rx.Observable.interval(200).take(6).map(x => `data_${x}`);

getTitle$({ url, data }).subscribe(title => console.log(title));

<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

案例 2。您希望仅在 url 流发出时更新标题，但也希望从 data 流中获取最新值。

使用withLatestFrom :

const getTitle$ = (activatedRoute) => {
    return activatedRoute.url
        .withLatestFrom(activatedRoute.data, (url, data) => {
            return url + data;
        });
}

const url = Rx.Observable.interval(400).take(3).map(x => `url_${x} `);
const data = Rx.Observable.interval(200).take(6).map(x => `data_${x}`);

getTitle$({ url, data }).subscribe(title => console.log(title));

<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

如果您遇到您的可观察对象不包含任何这些运算符，请尝试显式导入它们:

import 'rxjs/add/operator/combineLatest';
import 'rxjs/add/operator/withLatestFrom';

更新:

为了使其更具体，这里有一个更接近您的原始示例的代码示例:

this.router.events
    .filter(event => event instanceof NavigationEnd)
    ... // <- route mapping and filtering skipped for brevity
    .switchMap(route => {
        return route.data.combineLatest(route.url, (data, url) => {
            // make the title out of data and url
            return data['title'] ? `Title: ${data['title']}` : url.join('');
        });
    })
    .subscribe(title => this.title.setTitle(title));