Angular 6升级后动态设置页面标题代码失效求助

你遇到的问题完全是RxJS 6带来的操作符使用方式变更导致的，别担心，这是升级后很常见的坑，我帮你一步步梳理：

核心问题 #

RxJS 6彻底废弃了之前的"链式操作符"（比如.filter().map()这种直接挂在Observable原型上的调用方式），所有操作符都必须通过pipe()方法来组合，而且每个操作符都需要单独从rxjs/operators导入——你已经导入了filter和mergeMap，但漏掉了map操作符，这就是第二个报错的直接原因。

修正后的完整代码 #

首先补充导入map操作符：

import { filter, map, mergeMap } from 'rxjs/operators';

然后把所有操作符都放到pipe()内部，用逗号分隔组合：

ngOnInit(): void {
  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((event) => this.titleService.setTitle(event['title']));
};

为什么之前的写法不行？ #

1. 第一个报错this.router.events.filter is not a function：RxJS 6中，Observable不再在原型链上挂载filter、map这些操作符，必须使用pipe()包裹pipeable版本的操作符才能调用。
2. 第二个报错this.router.events.pipe(...).map is not a function：你只把filter放进了pipe()，但后续的map还是用了旧的链式调用方式，再加上没导入map操作符，自然会触发报错。

这样修改后，你的动态设置页面标题的逻辑就能正常运行了。

内容的提问来源于stack exchange，提问作者Thabo