Question

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，但不提供path参数，则会显示图书集。

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

I tried flipping the path parameters here。在旧版本的Angular中，顺序似乎无关紧要，但现在已经有了。

Filed a bug report here

Answer 1

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

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

从应用模块中删除电子书模块后，查看新配置：

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。

Answer 2

尝试一下，请注意我更改了顺序，并向pathMatch路线添加了''

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

如果问题没有解决，请告诉我删除我的答案

将：id添加到受保护的组件路径会导致无限循环？

2 个答案: