问题标签 [ngrx-router-store]

In our Angular-7-Application, we use @ngrx and @ngrx/router-store to get the query params into the state.

A few components of the application are paginated lists. We have every list as a component and the Pagination-Component included in every list.

The current page is stored in the URL as a query Parameter: user/:userId/agent?page=0 and the PaginationComponent gets the current page from state.router.state.queryParams.page. However, if a user accesses the URL user/:userId/agent, queryParams.page returns undefined.

We could solve this by using state.router.state.queryParams.page || 0 in every component but I wonder, if there is an easier way - can a Route without query params be redirect to a Route with query params?

I tried using the most obvious redirect:

but I get Error: Cannot match any routes. URL Segment: 'user/max/agent'.

The only feature request I found was this one where the error above appears.

我正在尝试使用自定义序列化程序来实现 ngx-router-store - 使用他们在此处的文档中显示的代码，但我收到以下错误：

app.module.ts

减速器/index.ts

我正在使用路由器商店版本 7.1.0：

StoreRouterConnectingModule.forRoot 中的配置对象接受的唯一属性是 stateKey。查看 StoreRouterConnectingModule 的 forRoot 方法，预期的类型是 StoreRouterConfig | 错误中详述的 StoreRouterConfigFunction。

我不确定我是否做错了什么，有些东西我没有实现，或者文档是否存在版本差异。

我目前正在为我的 Angular 项目创建路由，并且我很感兴趣是否在 Angular 世界中进行实践，以与您在 ngrx 中的操作枚举相同的方式拥有路径列表，以便可以使用它们在多个地方？

某种方式的东西

只为路径

我们构建了一个 web 应用程序，用户必须在其中单击列表才能进入某个编辑视图。例如，从登录页面，用户选择一个客户端，然后选择一个代理，然后进入该代理的编辑视图。在这种情况下，URL 将包含 ID /client/4/agent/7/edit：。@ngrx/router-store用于处理 URL 更改，因此当直接访问上面的 URL 时，编辑视图出现并且工作正常。

该应用程序还包含一个面包屑，它显示的不是 ID，而是路径的名称：客户：公司 > 代理：邮政 > 编辑时间client = { id: 4, name: 'Company' }和agent = { id: 7, name: 'Postal' }。我们通常在单击对应列表条目时获取此数据（client和）。agent

/client/4/agent/7/edit但是，当直接访问类似 URL 时，不会client存储包含名称的 -Object。当以 reduxy 方式直接访问 URL 时，如何获取属于路由的对象？我知道如何将其破解到应用程序中，但数据流应该保持良好和干净的reduxy。

我考虑过的事情：

• 检查每个组件中是否存在client等agent，如果它们不存在，则获取它们。这可能会产生很多开销，此外，逻辑应该进入无法触发操作的选择器。
• 使用服务来检查数据是否已经存在 - 如果没有，则加载它。将在每次 URL 更改时进行检查，并且还可能减慢应用程序的速度。
• 在应用程序的初始加载时触发数据获取 - 在哪里执行此操作？AppComponent?

我也愿意重构整个应用程序（使用另一个路由，引入@ngrx/effects，重新定义 API 等）

设想：

我有home一页有两个组件。每个组件都有自己的查询参数。ex XComponent 有查询参数：fromandto和 YComponent 有查询参数：idand type。

Xcomponent 导航看起来像这样：

YComponent 导航看起来像：

主屏幕应根据这两个组件进行渲染。

X 和 Y 组件都有自己的动作、reducer 和 effect。

X效果：

Y效果：

例如，如果用户将更改 X 组件from to参数，ROUTER_NAVIGATION则触发操作并同时XEffect捕获YEffect此操作，并且不需要更新 Y 组件相关数据，它仍然会更新。

我的目标是，当 X 组件 queryParams 发生变化时，应该更新 X 组件相关数据。而当 Y 组件相关的查询参数将发生变化时，应该只更新 Y 组件相关的数据。

PS我不知道什么是标题的最佳选择。如果您有任何建议，我会更新。

我的效果是我需要传递从我的 URL 获得的 ID。

我有一个包含我的路由器存储的根存储，并且我有另一个存储用于我的组件，以加载一些数据。

1. 如何从我的效果内的路由器商店访问 URL 参数？

2.我的组件效果是否可以访问根存储中的数据？

3. 现在我有 24322 硬代码，我需要从我的根存储中获取它。我应该得到它的效果还是将它传递到有效负载上更好？*

这是我的组件效果的代码

我已经将一个小项目从 angular 6 升级到 8，现在我遇到了一个我不明白的错误。

有人可以看看并给我一些指示。代码可以在这里找到。提前致谢！

我已经以常用的方式（ https://ngrx.io/guide/router-store/configuration）为我的 Angular 项目实现了 NgRx Router-Store 。

我的“问题”是我的序列化方法CustomRouterStateSerializer似乎被多次调用，当通过单击组件的相应 html 元素触发 routerLink 时。

您将在StackBlitz上找到以下描述的最小示例应用程序。

我的实现

这是我的router.reducer.ts文件，其中包含 RouterStateUrl-Interface 和 Serializer-Class：

这是我的app.module.ts文件：

详细描述和输出

假设我的应用程序当前显示了一些项目的概述（url：/projects），并且 routerLink 被触发以切换组件以显示作业的概述（url：/jobs）。控制台将打印三条消息：

• CustomRouterStateSerializer called by /projects, random: 0.0896547559010431

• CustomRouterStateSerializer called by /jobs, random: 0.7662025752972623

• CustomRouterStateSerializer called by /jobs, random: 0.07919176016307328

NgRx Store DevTools 正在按预期显示几个操作：

@ngrx/router-store/request

@ngrx/router-store/navigation

@ngrx/router-store/navigated

如您所见，@ngrx/router-store/navigation和的状态@ngrx/router-store/navigated是相同的。此外，它们的随机数与第二个控制台输出相同。随机数@ngrx/router-store/request属于旧项目视图的状态。

NgRx Store DevTools 的输出似乎符合预期。但是我不明白什么时候以及什么时候触发了其他控制台输出的序列化方法。在任何状态下，我都找不到第一个和第三个控制台输出的任何随机数。现在我问自己是我犯了错误（实现的东西）还是这只是正常的行为（但为什么？）。也许你们中的一些人可以告诉我。

是否有一些内置选择器可以从 NgRx 路由器商店获取所有应用程序路由？或者 NgRx router-store 是否甚至包括路由器路由？

我有一个ngrx v8样式化简器（使用 createReducer + on），它需要对路由更改做出反应。

这无法编译，因为ROUTER_NAVIGATION不是动作创建者：

'"@ngrx/router-store/navigation"' 类型的参数不可分配给 'ActionCreator>' 类型的参数。类型“@ngrx/router-store/navigation”不可分配给类型“FunctionWithParametersType”

它不适用于RouterNavigationAction以下任何一种：

'boolean' 类型的参数不能分配给 'ActionCreator>' 类型的参数

如何在 createReducer/on 函数中使用 ngrx/router-store 操作？我找不到为给定动作导出的动作创建者。