Question

我最近升级到Angular 6和rxjs 6，自升级以来，动态设置页面标题的以下代码不再有效

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

这给了我一个错误

this.router.events.filter is not a function

我尝试将过滤器包裹在像

这样的管道中

this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))

但是我收到了错误

this.router.events.pipe(...).map is not a function

我已经导入了像

这样的过滤器

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

我在这里缺少什么？

Answer 1

这是使用pipeable/lettables的正确方法。

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

Answer 2

在RxJs 6中，所有运算符都是可管理的，这意味着它们应该在管道方法调用中使用。有关here的更多信息。

所以你拥有的代码应该是：

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

如果您有更大的应用，我建议您查看rxjs-tslint project，因为它可以让您自动更新代码。

在Angular中动态设置页面标题

2 个答案: