问题标签 [ngrx-router-store]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
8343 浏览

angular - 如何静音“状态中不存在功能名称“路由器”...”ngrx/router-store 警告

当我将“@ngrx/router-store”添加到我的项目时,它会在开发模式和单元测试结果中向应用程序控制台发送垃圾邮件,并显示以下消息:

状态中不存在功能名称“路由器”,因此 createFeatureSelector 无法访问它。确保它是使用 StoreModule.forRoot('router', ...) 或 StoreModule.forFeature('router', ...) 导入到加载的模块中的。如果默认状态是未定义的,就像路由器状态一样,则可以忽略此仅用于开发的警告消息。

我试图将router状态属性类型设置为

和初始状态值

但它与routerReducer类型冲突,它只接受

如何禁用此警告?老实说,我觉得这很烦人。

0 投票
2 回答
1042 浏览

angular - 模拟 @ngrx/router-store 的 selectRouteParam

我有一个使用 NgRx 和@ngrx/router-store(8.4.0) 的 Angular 8 应用程序(核心 8.1.2),但在模拟由fromRouter.getSelectors(selectRouter).

我编写并尝试测试的选择器如下所示:

选择器selectRoutePageIndex,调用商店生成的方法,看起来像这样:

实际上,我不一定关心模拟选择selectRouteParam器,但我需要模拟我的selectRoutePageIndex选择器。不幸的是,文档中描述的技术似乎不适用于由@ngrx/router-store.

任何想法我怎么能做到这一点?

0 投票
1 回答
552 浏览

angular - 扩展 @ngrx/router-store routerReducer 以修改添加到 RouterStateUrl 的字段

如何使用 Angular 8、ngrx 8 扩展逻辑我使用自定义序列化程序保持路由器状态

export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> 自定义状态在哪里

} 添加一个新字段 -breadcrumbs

对于整个商店,我有一个这样的减速器映射:

我想操纵我的路由器状态的自定义部分(面包屑字段)。是否有一种标准方法可以扩展 routerReducer 以允许更改自定义字段?

更新:我看到的一种可能的解决方法是在商店中为面包屑创建一个单独的功能,保持路由器状态功能的纯净。这将需要新功能来减少路由器操作。在我看来,这是一个 hack。路由器状态允许使用额外字段扩展状态似乎不合逻辑,但减速器不允许

0 投票
1 回答
276 浏览

angular - 如何使用 NgRx-router-store 将 NavigationExtras 带到商店?

我想将导航调用的 NavigationExtras 信息状态保存到存储中。我尝试为此使用 NgRx 路由器存储。

我创建了一个 RouterStateSerializer,但我无法从这里访问 NavigationExtras 数据。实际的解决方案将状态存储在以下导航中(因为我使用 history.state)。

有人知道如何解决这个问题吗?

期望在商店中找到 navigation_extra 数据。

0 投票
1 回答
309 浏览

angular - NgRx:选择器在转换到不同页面时被调用

我是 NgRx 的新手。看了一堆之后,我@ngrx/router-store在app状态中添加了router(),来访问selector中的router参数。我正在使用 aCustomRouterSerializerRouterState.Minimal。从那时起,我遇到了一个问题,例如,当我从详细信息页面 ( /hero/:heroId ) 导航到列表页面 ( / ) 时, getSelectedHero详细信息页面的选择器被调用,这会导致其他问题。当然,我可以将空检查放入...

但由于我是初学者,我想我最好问一下。getSelectedHero在转换到不同页面时调用似乎是错误的 。确定路由器状态正在改变,但是?

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

我创建了一个演示该问题的“超级”应用程序。我将它推送到GitHubStackBlitz

这是详细页面 ( /hero/:heroId ) 中的选择器代码,当您离开它时会调用该代码。

在详细信息页面 (/hero/:heroId) 我使用以下内容:    

0 投票
1 回答
387 浏览

angular - 从ngrx/router-store 获取navigationTrigger

我正在使用ngrx/router-store 8。此版本公开了“@ngrx/router-store/request”操作,其中在其有效负载中包含一个navigationTrigger:

navigationTrigger 可以获取以下两个值之一:

  1. 命令式 - 直接访问页面(通过单击链接)
  2. popstate - 使用浏览器后退/前进按钮时

我需要随时知道我是如何到达当前页面的,所以我需要访问这个变量。问题是 router-store 的内置 reducer 不会将此变量保持在状态中,它仅显示在此操作的有效负载中。我意识到我需要覆盖默认的减速器,但我不知道如何做到这一点,也找不到任何相关信息。也许还有另一个想法如何存储这些数据?

0 投票
1 回答
577 浏览

angular - 如何使用 NGRX 路由存储在组件之间导航并将我的 url 更改为 localhost:4200/:id

如何使用 NGRX 路由存储在组件之间导航并将我的 url 更改为localhost:4200/:id

:id=> 表示:当前 ID

我希望我的 URL 更改为/id我从组件接收到的好方法

我的导航栏

但这种方法并不好。

我的应用模块

在我的选择器里面

我想将它用于我的新组件。

如何从我的组件发送一个 id 并更改我的路由?

谢谢 :-)

0 投票
1 回答
575 浏览

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

非工作示例使用router-store

0 投票
1 回答
186 浏览

angular - 使用来自路由器存储的参数或参数的操作

问题:

我有组件和网址,例如:

https://127.0.0.0/car/carName1/view1

此调度操作和效果从服务中获取单个视图并将其添加到集合中

状态将如下所示:

现在,在同一个组件中,我需要从包含更多我需要的数据的视图中获取更多信息,或者换句话说,我需要从中选择一些

问题是Selectors.selectMoreData需要视图名称/键。因为 state 有更多的视图,而不仅仅是当前组件的一个视图。

我有什么可能?就像在效果中使用路由器存储并从 url 获取密钥一样?或者我应该退后一步,因为这是完全错误的。

0 投票
2 回答
982 浏览

angular - ngrx/router-store - 路由参数选择器为子路由返回未定义

我有这个路由设置:

我需要能够friendlyUrl在树中的每个组件中使用 ngrx 选择器。所以我定义如下:

它确实在“父”级别组件(路由)上工作。这意味着当用户转到edit/some-concert选择器时会返回some-concert。但是对于/edit/some-concert/edit/songs/1(在子组件中)它返回undefined. 我不知道为什么。

我都试过了routerState: RouterState.MinimalrouterState: RouterState.Full。结果相同。

我可以尝试哪些新事物?