在我们的应用程序中，我们有一个简单的商店，在根级别包含 anAuthState和 a RouterState。RouterState是通过@ngrx/router-store方法创建的。

我们有一些选择器必须使用 RouterState 来检索例如一个参数，然后将它与其他选择器结果结合起来。

我们的问题是我们无法找到正确设置测试套件以测试此类组合选择器的方法。

减速机设置

应用模块导入

reducers如下：

减速机

这是 AuthState 减速器：

测试设置

测试及其结果

测试 1

{路由器：{状态：{url：'/list/123'，参数：{someId：123}，queryParams：{}}，navigationId：1}，身份验证：{loggedIn：false}}

如您所见，getRouterState选择器不仅检索router状态切片，而且检索包含整个routerState+的对象authState State。router 和 auth 是这个对象的子对象。因此选择器无法检索正确的切片。

测试 2

未定义 - 类型错误：无法读取未定义的属性“状态”

测试 3

不明确的

TypeError：无法读取未定义的属性“状态”

类型错误：无法读取 {auth: {}、路由器：{}} 的属性“loggedIn”

笔记

请注意语法

如果我们想使用多个 reducer 组合选择器，这似乎是强制性的。我们可以只使用forRoot(reducers)，但我们不能只测试路由器选择器。州的其他部分将不存在。

例如，如果我们需要测试：

我们需要路由器和身份验证。而且我们找不到合适的测试设置来允许我们使用AuthStateand来测试这样的组合选择器RouterState。

问题

如何设置这个测试，以便我们基本上可以测试我们的选择器？

当我们运行该应用程序时，它运行良好。所以问题只出在测试设置上。

我们认为使用真实路由器设置测试床可能是一个错误的想法。但是我们很难模拟 routerSelector（仅）并给它一个模拟的路由器状态切片，仅用于测试目的。

仅模拟这些路由器选择器真的很难。监视store.select很容易，但是监视store.select(routerSelectorMethod), 方法作为参数变得一团糟。

我在警卫路由方面遇到了一些奇怪的问题。情况如下：页面 A 上有一个守卫，守卫检查它是否拥有可以访问该页面的所有内容。如果不是，它将重定向到页面 B 以获取例如选择客户端所需的一切。当该用户在没有正确信息的情况下导航回页面 A 时，它会被重定向回页面 B。这就是一切出错的地方，因为不允许用户转到页面 AI 从守卫返回 false 并进行重定向。但是我的商店说路线是页面 A，但是因为我拒绝导航，所以我仍然在页面 B 上。

这种情况在代码中如下所示：

警卫

路线

有人知道我在这里做错了什么吗？此外，每当我返回 false 时，当前页面也不会被破坏或重新初始化。

提前致谢！

我一直在查看ngrx 示例应用程序并尝试使用以下内容对其进行扩展：

• 搜索书籍时，查询将作为查询参数写入 url，例如http://localhost:4200/book/find?query=book_title
• 使用包含查询参数的 url 打开页面时，应填充搜索输入框并显示搜索

做这样的事情的正确方法是什么？

我已经添加了我的解决方案，它可以完成工作，但我不确定它是否有任何好处。在其中我将查询参数存储在两个看起来像反模式的地方

我的解决方案：

在 app/books/effects/books.ts 中在搜索效果中添加了一个路由导航，这样每当触发搜索时，都会使用查询字符串更新 url

在 app/reducers/index.ts 中添加了路由器查询参数的选择器：

在 app/books/containers/find-book-page.ts 添加了方法

这个方法是从 find-book-page 组件中的构造函数调用的，所以当这个组件被加载时，它会检查 url 中是否有查询字符串，如果有，则使用该查询字符串调度一个操作

我已将@ngrx 添加到我的应用程序中，从那时起，默认路由不再起作用。不知道我错过了什么。通往所有其他路径的路线仍在运行。

http://localhost:4200/#/不会重定向到http://localhost:4200/#/dashboards/dashboard1

使用菜单导航到http://localhost:4200/#/dashboards/dashboard1有效。

这在我添加 store-router 之前有效

我的路线：

应用程序模块

包.json：

更新：

AuthGuard.service.ts

我有一些参数需要放在我的一些页面中，这意味着当访问这些页面时，我想检查它们是否在 ngrx 商店中，如果有就使用它们。另一条规则是，如果它们存在于 URL 中，请使用它们并替换 ngrx 商店中的那些。

所以顺序是这样的：

1. 如果有的话，使用来自 URL 的那些
2. 如果有的话，使用来自ngrx商店的那些
3. 如果没有，将它们标记为空

我发现只需键入脚本就很容易实现，但我不知道我应该通过<a>element 和 routerLink 作为参数传递什么。

有没有办法说什么时候RouterActions.Go被调用，检查ngrx store中是否已经有一些参数？

Angular2+ 中是否有最佳实践方法使 URL 成为应用程序状态的单一事实来源。

EmberJs 有 Route Models，每个 URL 段都可以有一个模型，每个 URL 段的模型是从左到右解析的，所以嵌套页面可以使用父页面的模型，因为嵌套页面模型是在父页面之后解析的。

如果这是一种常见或推荐的方法，我想在 Angular2 中实现类似的东西。

我在我的 Angularv5 应用程序中使用@ngrx/router-store并且我最近开始遇到一个错误：（Navigation ID X is not equal to the current navigation id Y其中 X 和 Y 是整数）。

当我从特定路线 B ​​导航到路线 A 时，这个问题一直发生。从任何其他路线导航到路线 A 似乎工作正常。

我发现的与此相关的唯一其他SO 问题提供了该问题可能是由多次快速更新导航引起的。为了测试这是否发生（不应该发生），我在根组件中订阅了路由器导航事件，在订阅中设置了一个断点，并打开了一个调试会话来逐步解决问题。这样做，我可以看到

1. 假设当前导航 ID 是 11。当我导航到问题路线时，路由器开始导航，成功执行每个导航事件，包括NavigationEnd然后立即 @ngrx/router-store 抛出一个'ROUTER_CANCEL'动作，说明：Navigation ID 12 is not equal to the current navigation id 13。据我所知，12 是正确的导航 ID（同样，导航 ID 11 完成并立即'ROUTER_CANCEL'被抛出，而路由器不会发出任何进一步的导航事件）。此外，'ROUTER_CANCEL'操作负载包含导致问题的路由器导航事件以及导致问题时商店的状态。导致问题的事件的 ID 为 12，当时商店中的路由器状态的 ID 为 11。因此，12 似乎是正确的导航 ID，不应该引发错误。

2. 在从问题路由导航到用户配置文件路由时，在 @ngrx/router-store 取消导航之前不会发生其他导航。（即我没有快速更新导航路线）

3. 除了 ngrx 调度'ROUTER_CANCEL'操作之外，不会报告任何错误（也不会引发错误）。

同样，除非导航从特定路线 B ​​开始，否则遇到问题的路线工作正常。据我所知，这条特定路线 B ​​没有什么不同或不寻常的（问题路线 A 也不关心人们来自哪里——这两条路线彼此没有关联）。

最后一件事：在调试会话之外触发错误似乎总是会导致表单Navigation ID X is not equal to the current navigation id X+1中的错误，但是在调试会话中触发错误可能会导致Navigation ID 11 is not equal to the current navigation id 15orNavigation ID 13 is not equal to the current navigation id 20等​​。

有谁知道发生了什么？我对@ngrx/router-store 不够熟悉，无法真正猜测这可能是如何发生的。我的假设是，当@ngrx/router-store 接收到事件时，商店中的导航 ID 值会同步增加，NavigationEnd所以我什至不确定这些 id 是如何出现乱序的——更不用说在这种情况下id 似乎是正确的。

任何想法都非常感谢！

PS：我很高兴发布代码，但我的应用程序很大，我不知道这个错误是从哪里触发的。

我正在尝试在我的 Angular 5 应用程序中测试一个组件，该应用程序使用，并且在此选择器中未定义时@ngrx/router-store遇到问题：state

为了克服这个问题，我尝试在我的 TestBed 生成的模块中添加以下导入：

但是，现在我在 Karma 测试浏览器窗口中收到以下错误：

TypeError：无法在 StoreRouterConnectingModule.webpackJsonp../node_modules/@ngrx/router-store/@ngrx/router-store.es5.js.StoreRouterConnectingModule.setUpBeforePreactivationHook （http://localhost:9878/_karma_webpack_ /webpack:/node_modules/@ngrx/router-store/@ngrx/router-store.es5.js:169:1 )

官方文档中关于测试路由器商店的信息很少或根本没有，我在谷歌上也找不到任何东西。

我知道我没有提供大量代码，所以请让我知道您还需要查看什么，我会添加它。

在Router-Store 的 NGRX 文档中，他们只提供了一个带有.forRoot(). 当我尝试使用时.forFeature()，我发现不存在这样的静态方法。

我希望能够在我的功能模块（以及应用程序模块）中定义某些操作和效果。

如何在功能模块中使用 router-store？

我有一个应用程序，其中 app.component 只有路由器插座。ng-template在从应用程序组件向下 4 级的组件中添加 ViewChild 之前，我没有任何问题。这是结构：

AppComponent 使用 FolderComponent 延迟加载 FolderModule。文件夹组件模板是呈现子组件的 ngFor。它是具有 ViewChild 的子组件。我不确定解释这一点的好方法。我认为错误中的 ngIf 是我的 ng-if，一旦有数据就会加载页面。我希望有人能认识到这个错误并告诉我它的含义以及为什么这么深的东西会导致应用程序的根本问题。ngIf 部分继续进行：

这是导致它的行。错误如下：

尝试在对象'function ViewContainerRef（）{}'上使用描述符'{“value”：“RouterOutlet”，“configurable”：true}'配置'__source'并出错，放弃：TypeError：无法定义属性__source，object is not extensible zone.js:2257 Attempting to configure '__source' with descriptor '{"value":"NgIf","configurable":true}' on object 'function ViewContainerRef() { }' 并得到错误，放弃： TypeError：无法定义属性__source，对象不可扩展