Angular 中带有 CanActivate 保护的多个通配符路由答案

【问题标题】：Multiple wildcard routes with CanActivate guards in AngularAngular 中带有 CanActivate 保护的多个通配符路由
【发布时间】：2018-02-05 14:36:49
【问题描述】：

我想在我的 Angular 应用程序中显示带有自定义 slug 的页面，并通过添加带有 CanActivate 保护的通配符路由来做到这一点，该保护检查当前浏览器路径是否是与 CMS 中的页面关联的 slug：

{
  path: '**',
  loadChildren: './modules/content-page/content-page.module#ContentPageModule',
  canActivate: [IsContentPage]
}

如果找到页面，应用程序会加载 ContentPageModule，但现在我希望应用程序在找不到页面时显示 404 页面。最好 URL 保持不变，所以我不想从 IsContentPage 保护中重定向。添加另一个没有保护的通配符路由不起作用：

{
  path: '**',
  loadChildren: './modules/not-found/not-found.module#NotFoundModule'
}

声明这两个路由后，应用程序在 IsContentPage 返回 false 后只显示一个空白页面。如果 NotFoundModule-route 在 ContentPageModule-route 之前声明，则始终触发该路由。

我正在使用 Angular 路由器 5.2 版。

有人可以帮助我吗？我应该如何解决这个问题？

【问题讨论】：

【解决方案1】：

1) 延迟加载和通配符选项存在错误。 Check this answer:

2) 定义另一个通配符是没有意义的。这样做 Angular 不会知道应该使用哪种情况

【讨论】：

1) 感谢您指出这一点。 2) 那么你将如何有条件地显示 ContentPage 或 NotFound 模块？您不可能通过路径知道应该激活哪些模块，因此路由参数是不够的，因为带有斜杠的路径将不起作用。
通配符路由是一种拦截无效路由的策略，所以我给你的建议是改变匹配策略。此外，因为所有不同路径只有一个模块是一种不好的做法，因为您将在加载此模块时加载应用程序的所有代码，这不是延迟加载策略的目标。对不起