Установка заголовка страницы динамически в Angular - PullRequest
Новая
       6

Установка заголовка страницы динамически в Angular

0 голосов
/ 19 мая 2018

Я недавно обновился до 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';

Чего мне здесь не хватает?

Ответы [ 2 ]

0 голосов
/ 19 мая 2018

В RxJs 6 все операторы являются конвейерными, что означает, что они должны использоваться внутри вызова метода pipe.Подробнее об этом здесь .

Итак, ваш код должен выглядеть примерно так: 

   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 , поскольку это позволит вам автоматически обновлять код.

0 голосов
/ 19 мая 2018

Это правильный способ использования 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']));
...