2

我最近升级到 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';

我在这里想念什么？

4

2 回答 2

4

这是使用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']));
于 2018-05-19T14:28:01.270 回答
1

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

因此，您拥有的代码应该类似于：

   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 项目，因为它可以让你自动更新代码。

于 2018-05-19T14:28:30.943 回答