时间戳

首页 > 解决方案 > NgRx router-store 在离开当前页面时发出路由参数更改

angular - NgRx router-store 在离开当前页面时发出路由参数更改

问题描述

我有一个 Angular 组件，它需要响应适用于当前页面的路由参数更改。例如，也许我有路由page/:id，如果:id发生变化，我想通过重新加载组件的内容来响应。

使用ActivatedRoute's paramMap，这很容易。当我在page/:id路线上时，我可以更改:idURL 并且应用程序会做出适当的响应。当我离开page/:id路线时，组件被破坏，并且不会发出任何参数更改。

但是，如果我尝试使用相同的方法@ngrx/router-store，则会发出比我实际想要的更多的路由参数更改。我正在从正在导航到的路线中获取路线参数。这似乎是因为路由器存储在我的组件被破坏之前发出。

我需要一种方式来表达“我只想要这个页面的路由参数，并且一旦这个页面被导航离开，我需要你停止响应路由参数的变化。” 我认为这就像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();
  }
}

标签： angularrxjsngrxngrx-router-store

解决方案

通过传入的配置对象将导航操作时间更改为：PostActivationStoreRouterConnectingModule.forRoot

@NgModule({
  imports: [
    CommonModule,
    ...
    StoreRouterConnectingModule.forRoot({
      navigationActionTiming: NavigationActionTiming.PostActivation,
    }),
  ],
})

推荐阅读