Question

我是NgRx的新手。经过一堆阅读后，我将路由器（if(auth.getCurrentUser() != null){ String email = auth.getCurrentUser().getEmail(); tt1.setText(email); }）添加到了应用程序状态以访问选择器中的router参数。我正在将@ngrx/router-store和CustomRouterSerializer一起使用。从那时起，我遇到了一个问题，例如，当我从详细信息页面（ / hero /：heroId ）导航到列表页面（ / ）时，将会调用详细信息页面中的RouterState.Minimal选择器，这会导致其他问题。当然，我可以将空支票放入...

但是，由于我是初学者，所以我认为最好问一下。在过渡到另一页时调用getSelectedHero似乎是错误的。确定路由器状态正在改变，但是？

我花了一些时间试图找到不包含未定义检查的解决方案。

我创建了一个演示该问题的“超级”应用程序。我将其推至GitHub和StackBlitz。

这是详细信息页面（ / hero /：heroId ）中的选择器代码，当离开该页面时会被调用。

getSelectedHero

在详细信息页面中（/ hero /：heroId）我使用以下内容：

export const getSelectedHero = createSelector(
  selectHeroesState,
  getRouteState,
  (state, router) => {
    const hero = state.entities[router.state.params.heroId];
    // FixMe: simplifies the problem... hero is undefined if you navigation for /hero/:heroId to / and following line will throw an error.
    console.log("getSelectedHero", hero, hero.id, hero.name); 
    return hero;
  }
);

Answer 1

问题是，当您导航到其他路线时，路线参数:heroId不可用。

例如，当您导航到英雄页面.../hero/2时，路径参数:heroId可用，因为您已经定义了路径hero/:heroId;

当您导航到根页面.../时，路由与""匹配，这将导致未设置路由参数:heroId（在选择器上显示为未定义）

const hero = state.entities[router.state.params.heroId]; // <-- here "router.state.params.heroId" is undefined

由于您的getSelectedHero使用了路由状态选择器getRouteState，因此每次发生路由更改并且hero$下的订阅处于活动状态时，getSelectedHero将被调用。

解决您可以做到的：

if (router.state.params.heroId === undefined) return {};

或者您可以将选定的heroId变量移至英雄状态，这样导航不会触发英雄数据选择

NgRx：选择器在过渡到另一个页面时被调用

1 个答案: