router.events 在 Angular 6 中无法与异步一起正常工作

Question

我正在使用此代码动态标题

this.router.events.pipe(
    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(data => this.title = data.title || "");

并查看： {{title}}

我想重构这部分（用async代替subscribe ）所以我做了：

this.title = this.router.events.pipe(
    filter(event => event instanceof NavigationEn
    mapTo(this.activatedRoute),
    map(route => {
        while (route.firstChild) {
            route = route.firstChild;
        }
        return route;
    }),
    filter(route => route.outlet === "primary"),
    mergeMap(route => route.data),
    pluck("title")
);

并查看： {{title | async}} {{title | async}}

但是当我通过 URL 打开页面，甚至刷新页面时， title为空。 它仅在我直接在页面上导航（通过菜单、按钮等）时才有效。

我不知道为什么它可以与subscribe一起正常工作，而它不能与async 。

我什至只尝试使用日志，但这是同样的问题，标题没有出现在开头。

this.title = this.router.events.pipe(
    tap(() => console.log("test"));
)

Answer 1

我在 angular 7 中遇到了同样的问题 - 即想要在this.router.events.pipe使用async （而不是subscribe ）。

我使用startWith ( https://www.learnrxjs.io/operators/combination/startwith.html ) 解决了它，因此我可以捕获初始加载事件以及NavigationEnd事件。

这是相关的代码片段：

  this.router.events.pipe(
    startWith('Initial load'),
    filter(event => event === 'Initial load' || event instanceof NavigationEnd),
    // rest of code here
  );

Answer 2

这听起来像是一种竞争条件。 在路由器事件完成之前，模板并不总是有机会订阅。 您可以通过重播路由器事件来处理此问题，以便新订阅者（如async指令）接收他们可能错过的事件。