javascript - 将:id添加到 protected 组件路径会导致无限循环？

This stackblitz demo should not render，因为到受保护的:id的路由中的HelloComponent路径变量。

{ path: ':id', component: HelloComponent, canActivate: [AuthGuard] },
{ path: '', component: CollectionPageComponent, canActivate: [AuthGuard] }];

如果删除了:id，则将渲染login视图，因为这两个路径都将受到保护，但是如果将:id变量添加回该路径，则演示将永远旋转。

这是错误还是我在此位置添加:id违反了某些路由器原理？

请注意，出于故障排除的目的，我用ViewBook替换了HelloComponent组件。图书模块是懒惰的，应该起作用的方式是，如果用户通过身份验证并选择了要搜索的图书，则可以使用路径books/4545342显示该图书，这将触发:id路径，但是请求books，不带路径参数，则显示书籍收藏。

I'm using this demo as a reference point。是使用基本相同的路由配置。

I tried flipping the path parameters here。在Angular的旧版本中，顺序似乎无关紧要，但是现在确实如此。

Filed a bug report here

最佳答案

使用路由器时，必须小心在导入模块的位置。理想情况下，您不会在应用程序中的任何地方导入延迟加载的模块。

就您而言，您要将书本模块导入到您的应用程序模块中。这会将路由添加到根级别的路由器配置。路由器通过延迟加载的模块来处理未知的事物。无法激活的路由不会被添加到配置中。

从应用模块中删除电子书模块后，请参阅新配置：

0: {path: "login", component: ƒ}
1: {path: "", redirectTo: "books", pathMatch: "full"}
2: {path: "books", loadChildren: ƒ, _loadedConfig: LoadedRouterConfig}
3: {path: "**", component: ƒ}

VS之前的举动：

0: {path: ":id", component: ƒ}
1: {path: "", component: ƒ}
2: {path: "login", component: ƒ}
3: {path: "", redirectTo: "books", pathMatch: "full"}
4: {path: "books", loadChildren: ƒ, _loadedConfig: LoadedRouterConfig}
5: {path: "**", component: ƒ}

解决方法：只需将您的book模块导入app模块即可。对于您的情况，您需要在book模块中导入HttpClientModule。

关于javascript - 将:id添加到 protected 组件路径会导致无限循环？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54030737/