Question

我对官方Angular styleguide about feature modules有疑问。

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

| Name   | Age       |
| Peter  | 25        |
| > Cars | Brand     | Model   |
|        | Toyota    | Corolla |
|        | > Persons | Name    | Age |
|        |           | Peter   | 25  |
|        |           | Fred    | 35  |
| Hans   | 28        |
| Fred   | 35        |

因此我有一个循环依赖项，因为 person-table -> car-table -> person-table 来自两个不同的特征模块。将人员表和汽车表移到SharedModule中以完成用例是否被认为可以？

Answer 1

我更喜欢遵循每个模块一个组件的设计模式，并使用 lazy模块来实现具有单个 main 模块的所有功能。

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

惰性模块应仅具有该功能所需的插座组件和服务（提供者）。所有其他 visual 组件均来自 shared 文件夹，该文件夹包含每个模块一个组件目录。

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

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

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

/src/app/lazy包含惰性模块的子文件夹。
/src/app/main包含被引导的AppModule。
/src/app/shared包含每个模块一个组件目录的子文件夹

典型的 lazy模块就是这样的结构

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

/src/app/lazy/feature包含模块和路由
/src/app/lazy/feature/OutletFeature是惰性路由的目标组件。

惰性功能将包含防护，解析器和服务。如果功能唯一，您还可以添加其他组件，但是我尝试将其保持在最低限度，因为在类似的情况下，它们常常最终会被重新使用。功能会在以后添加。

共享文件夹包含组件。

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

上面是一个 Example 组件，具有相同名称的模块。遵循组件目录模式，同名文件夹将保存组件。共享模块不限于单个组件，但组件的消费者只希望看到模块导出的一个组件。在表的示例中，共享组件将是表，但是模块可能包含用于页眉，行和页脚的内部组件。想法是该模块具有单一目的。

以上所有内容都是意见，并且样式指南为小型项目提供了良好的模式。我已经在多个大型应用程序中使用了上面的方法，并且感觉它可以很好地扩展。

Angular Material库以每个模块一个组件模式为例。他们有一个自定义的构建过程，一开始会使他们的源代码结构有些混乱，但是一旦进入“组件”部分，所有内容都是单个组件。

https://github.com/angular/components

角度特征模块与共享模块

1 个答案: