Question

我有一个Angular6应用，该应用正在构建为更多内部应用框架。页眉/页脚/主要导航将共享，但每个应用程序（功能模块）的内部流程都应彼此分开。例如，一个功能可能是购买功能，另一个功能可能是入门功能，另一个功能可能是销售仪表板。它们彼此非常不同。

我想做的是想出一种声明式的方法来定义每个功能的已知配置。例如，次要导航（要素内的页面到页面），顶级标题标题以及其他各种与上下文相关的数据点。我最初的想法是将它们定义为每个功能中的JSON，这非常有用，除了我现在必须导入每个功能的配置，而不管用户是否导航甚至可以访问该功能。

我已经设置了上下文服务，该上下文服务用于检查导航中的URL并设置一些项目，但是同样，它必须在该服务的顶部使用此导入所有可能的配置。

extent

所以问题是：我有没有办法检查导航中的URL，并且在该订阅中，从正确的文件中提取配置，而无需过早导入它们？或者也许我可以使用模块来表达/声明那些选项？

Answer 1

在您的情况下，使用Typescript的Dynamic Import Expressions可能是一个可行的选择。

let config;
switch (val) {
  case 'foo': config = await import('@foo\foo.config'); break;
  case 'bar': config = await import('@bar\bar.config'); break;
  case 'baz': config = await import('@baz\baz.config'); break;
}

据我所知，在撰写本文时，现在有办法为导入字符串使用变量（例如await import(path)）。

Answer 2

updateConfig(feature: string) {
   import(`../configs/${feature}.config.json`).then(cfg => {
      this._currentConfig$.next(cfg);
   });
}

上面的代码片段显示了我的想法。事实证明，WebPack无法消化您通常在导入时使用的@路径，也不能使用完全可变的路径。模块包的所有可能选项必须具有路径的某些公共部分。我最终将配置从@foo\foo.config.ts移到@core\configs\foo.config.json。这使它们的模块化程度降低，因为现在core保留了它们的配置，但是却使模块变得懒惰。

有没有一种方法可以在Angular6路由中延迟加载静态json？

2 个答案: