angular - Angular 功能模块与共享模块

Question

假设我有一个功能模块person和一个功能模块cars。现在我想显示一个包含所有人的表格。单击表格行时，表格应展开显示包含一个人的所有汽车的汽车表格。现在，当单击汽车行时，我希望汽车表展开显示所有拥有此类汽车的人。

| 姓名 | 年龄 |
| 彼得 | 25 |
| > 汽车 | 品牌 | 型号 |
| | 丰田 | 卡罗拉 |
| | > 人员 | 姓名 | 年龄 |
| | | 彼得 | 25 |
| | | 弗雷德 | 35 |
| 汉斯 | 28 |
| 弗雷德 | 35 |

因此我有一个循环依赖，因为person-table -> car-table -> person-table来自两个不同的功能模块。是否可以将 person-table 和 car-table 移动到 SharedModule 以填充用例？

score 2 · Accepted Answer

我更喜欢遵循每个模块一个组件的设计模式，并将惰性模块用于功能，一个主模块引导所有内容。

主模块应该具有启动应用程序所需的最少依赖项，因为这可以提高加载性能，并且顶级路由应该是延迟加载的。因此，当应用程序启动时，延迟加载的第一个功能是主应用程序。所有其他惰性模块都是子路由。

惰性模块应该只具有该功能所需的出口组件和服务（提供者）。所有其他可视组件都来自一个共享文件夹，其中每个模块目录包含一个组件。

此设计模式确实遵循设计指南，但具有更细粒度的模块。它确实创建了更多样板代码和更多文件，但同时具有可维护性优势和编译时间优势（即摇树更有效）。

对我来说典型的项目结构：

src/app
+-- lazy
+-- main
+-- shared

典型的惰性模块将是这样的结构

src/app/lazy/feature
+-- OutletFeature
+-- feature.module.ts
+-- feature-routing.module.ts

惰性特性将包含警卫、解析器和服务。如果它们是该功能独有的，您还可以添加其他组件，但我尽量将其保持在最低限度，因为当稍后添加类似功能时，它们通常最终会被重用。

共享文件夹包含组件。

src/app/shared/Example
+-- Example/example.component.ts
+-- example.module.ts

上面是一个带有同名模块的示例组件。遵循组件目录模式，同名文件夹包含组件。共享模块不限于单个组件，但组件的使用者应该只期望看到该模块导出的一个组件。在表格的示例中，共享组件是表格，但模块可能包含页眉、行和页脚的内部组件。这个想法是该模块只有一个目的。

上面的一切都是一个观点，风格指南为一个小项目提供了一个很好的模式。我已经在几个大型应用程序中使用了上述内容，并且觉得它的扩展性非常好。

Angular Material库使用每个模块模式一个组件作为示例。他们有一个自定义的构建过程，这使得他们的源代码结构起初有点混乱，但是一旦你进入组件部分，一切都是一个单一的组件。

1 回答 1