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}}

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

我不知道为什么subscribe不能正常工作，async不能正常工作。

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

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

Answer 1

我在角度7中遇到了相同的问题-即想将async与subscribe（而不是this.router.events.pipe）一起使用。

我使用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

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

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

2 个答案: