8

我对模块有些疑惑。不久前我开始使用 Angular 2，所以我搜索了太多的主题，但我还没有找到任何令人满意的答案。

当我们创建 Angular 2 应用程序时，肯定会使用模块。当然也使用嵌套模块。我们可以使用多少个嵌套模块？这是可行的还是嵌套模块有限制？

例如，假设我有管理仪表板应用程序。我们可以这样建造吗

app.module.ts
|
 --dashboard
    |
    --dashboard.module.ts
      |
      --login
        |
        --login.module.ts
        .
        .
        .

我们可以肯定地用这种方式构建。但是假设我们有 5 个或更多嵌套模块，是否可以用于 Angular 应用程序？会导致任何问题或导致任何性能问题吗？或者我们应该保持简单（最多 3 个嵌套等）以进行练习？

此外，当嵌套模块和组件增加时，tsc 的行为如何？

总结一下嵌套模块的优缺点等，嵌套模块结构的最佳实践是什么？

4

2 回答 2

16

嵌套或不嵌套不是非黑即白的情况。不幸的是，对于大多数软件开发来说，“这取决于”。

但是，我敦促您考虑这一点 - NgModule 的重点（除了允许 AOT 的技术动机）是为您的应用程序提供更高级别的“单元”。换句话说，您可以将单个组件/服务/管道分组为离散的分组，从而允许您将该分组视为提供一定数量功能的单个单元。在大多数情况下，这用于在您的应用程序中提供功能（所谓的“功能模块”），但 NgModule 系统也用于提供其他类型的横切关注点。事实上，库作者很容易将他们的库作为单个 NgModule 分发，封装他们提供的所有功能。（示例包括HttpModule和FormsModule等内置库，也包括MaterialModule、FlexLayoutModule等）

这个将 NgModule 视为分发容器的用例帮助我思考应该如何对组件/服务/管道进行分组——这并不总是可能的，但我试着认为我可以使用一个包含模块定义及其各个部分的文件夹并且应该能够将该文件夹放入任何其他应用程序中，并且它应该基本上可以工作（假设存在其外部依赖项）。以这种方式思考有助于我将注意力集中在制作 NgModule 的粒度上。这并不是说我不在那个 NgModule 中嵌套文件夹，而是仅仅因为嵌套了一个文件夹并不意味着我会自动创建一个 NgModule - 除非这些项目作为某种分发容器有意义，否则我不会打扰创建嵌套的 NgModules 只是为了匹配文件夹结构。

总而言之，您的文件夹结构并不自动意味着您为深度嵌套的文件夹创建 NgModule - 因此，可能不需要深度嵌套的 NgModule 设置。

于 2017-03-27T00:09:56.517 回答
3

对我来说，使用NgModules 的主要目标是延迟加载；我不喜欢有角度的逻辑/特征结构。如果角度中没有延迟加载，我可能会以这种方式构造代码：

components/
services/
pipes/
models/
...

延迟加载，嵌套模块与不嵌套它们没有区别。我可能会决定哪些代码由同一页面上的哪些代码一起加载。例如，即使 2 个组件感觉它们属于同一个功能但它们位于不同的页面上，我希望它们位于各自页面的模块上，以便更好地进行延迟加载。

所以，我目前以这种方式构建我的代码：

app
|
 --services/
   |
    -- the services module called `CoreModule` in angular docs.
 --shared/
   |
    -- the shared module described in angular docs. Has models as well.
 --pages/
   |
    -- page1/
       |
        -- a module for page1/feature1 that I'll use in lazy-loaded manner (but may not do so if found unsuitable).
    -- page2/
       |
        -- a module for page2/feature2 that ...

因此，具体回答您关于嵌套的问题：

  • 嵌套模块实际上只是一个文件夹结构；与非测试角度相比没有效果。嵌套模块就像一个顶级模块。login.module.ts例如，您可以在 .旁边的模块中导入dashboard。
  • 由于它是一个文件夹结构，因此角度嵌套的级别没有限制。
  • 但是，通常在嵌套模块中，您有一个模块 X 导入一个模块 Y 导入一个模块 Z，......等等。对于这一点，我不知道它是否对性能有影响，但我不希望它有。尤其是在库依赖项中存在相同的情况：使用某个 npm 包中的 angular 组件/模块进行成像，该 npm 包中使用另一个 npm 包中的另一个 angular 组件/模块，......等等。
  • 对于我对嵌套模块和代码结构的看法，我已经在上面概述了。

作为避免嵌套的来源，请参阅Angular 官方样式指南中的“尽可能保持扁平文件夹结构”原则。一般来说，风格指南似乎是解决类似问题的好地方（刚刚发现！）。

于 2018-05-17T09:54:55.747 回答