javascript - 在 Angular 的同一父路由下加载多个模块

Question

我正在寻找一种方法，通过它我可以在 Angular 中的相同 path 下加载多个模块。例如，假设我有三个模块 AModule、BModule 和 CModule，每个模块都有自己的 RouterModule.forChild 调用。现在我想在 say site 路由下安装所有这些模块。

我实现此目的的一种方法是将路由包装在 site 路由下的 RouterModule.forChild 调用中，如下所示:

RouterModule.forChild([
  {
     path: 'site',
     children: [{}] // children goes here
  }
])

我不知道这种方法是否正确，但它工作正常。这种方法的唯一问题是我必须在每个要安装在 site 下的模块中指定 canActivate。虽然这不是问题，但我一直在寻找更简洁的解决方案。

我知道有一个属性 loadChildren 可以用来延迟加载模块。但是我想急切地加载模块。

我正在使用 AngularCLI，它将我在 loadChildren 中指定的模块代码拆分到一个单独的 JavaScript 文件中，这不是我想要的。

我正在使用 AngularClI v1.2.0 和 Angular v4.2.5。

非常感谢任何帮助。

谢谢

Answer 1

我并不完全清楚您的目标以及您最终想要实现的目标，但这里有一些想法。

您可以使用 loadChildren 和“延迟加载”来按需加载或急切加载。如果您选择预先加载的路线，一旦您的主路线被加载并显示您的第一个 View ，其他标记为预先加载的模块将立即异步加载。

我这里有一个例子:https://github.com/DeborahK/Angular-Routing在 APM-Final 文件夹中。

我不清楚您为什么不想拆分模块。它可以显着提高应用程序的启动性能(显示第一页的时间)。

除了 canActivate 之外，还有一个 canActivateChild，因此您可以将它放在父级上，而不必为每个路由重复它。文档在这里:https://angular.io/api/router/CanActivateChild