NgRx router-store выдает изменения параметров маршрута при переходе от текущей страницы - PullRequest
Новая
       36

NgRx router-store выдает изменения параметров маршрута при переходе от текущей страницы

0 голосов
/ 03 апреля 2020

У меня есть компонент Angular, который должен реагировать на изменения параметров маршрута, которые применяются к текущей странице. Например, возможно, у меня есть маршрут page/:id, и если :id изменится, я хочу ответить, перезагрузив содержимое компонента.

Используя ActivatedRoute paramMap, это легко , Пока я нахожусь на маршруте page/:id, я могу изменить :id в URL, и приложение ответит соответствующим образом. Когда я отклоняюсь от маршрута page/:id, компонент уничтожается, и изменения параметров не выдаются.

Однако, если я пытаюсь использовать тот же подход с @ngrx/router-store, генерируется больше изменений параметров маршрута, чем I на самом деле хочу. Я получаю параметры маршрута от маршрута, по которому осуществляется навигация до . Похоже, это происходит потому, что хранилище маршрутизатора испускается до уничтожения моего компонента.

Мне нужен способ сказать: «Мне нужны только параметры маршрута для этой страницы, и как только эта страница будет удалена из, Мне нужно, чтобы вы перестали реагировать на изменения параметров маршрута. " Я думал, что это будет так же просто, как реализовать takeUntil(unsubscriber$), который завершается в моем ngOnDestroy(). Однако это не работает, потому что следующая эмиссия параметров происходит до того, как будет вызван ngOnDestroy().

Я предполагаю, что такое поведение разработано, но я не уверен, как преодолеть проблему, с которой я сталкиваюсь .

Я разработал Stackblitz, который демонстрирует проблему .

Какой самый элегантный способ справиться с этой ситуацией, используя @ngrx/router-store?

Рабочий пример с использованием ActivatedRoute

export class MyComponent implements OnInit, OnDestroy {
  unsubscriber$ = new Subject<void>();

  constructor(public route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap
      .pipe(takeUntil(this.unsubscriber$))
      .subscribe(params => {
        // reload data
      });
  }

  ngOnDestroy() {
    this.unsubscriber$.next();
    this.unsubscriber$.complete();
  }
}

Неработающий пример с использованием router-store

export class MyComponent implements OnInit, OnDestroy {
  unsubscriber$ = new Subject<void>();

  constructor(public store: Store<State>) {}

  ngOnInit() {
    this.store
      .pipe(select(selectRouteParams), takeUntil(this.unsubscriber$))
      .subscribe(params => {
        // reload data
        // this code is being run even when this component is being navigated away from
      });
  }

  ngOnDestroy() {
    this.unsubscriber$.next();
    this.unsubscriber$.complete();
  }
}
...