从 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 行上，路由的类型为 ActivatedRoute，route.data 的类型为 Object，而我在 combineLatest() 行上遇到的错误是

route.data.combineLatest 不是函数

Answer 1

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

案例 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>

如果你发现你的 observable 不包含任何这些操作符，尝试显式地导入它们：

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));