Angular 8个组件

Question

对于具有许多组件（大约 50 个）的业务项目，最佳结构是什么？

每个组件都有自己的模块？

src/
├── app
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── app-routing.module.ts
│   ├── components
│   │   ├── comp1
│   │   │   ├── comp1.component.ts
│   │   │   ├── comp1.module.ts
│   │   │   └── index.ts
│   │   ├── comp2
│   │   │   ├── comp2.component.ts
│   │   │   ├── comp2.module.ts
│   │   │   └── index.ts
│   │   ├── comp3
│   │   │   ├── comp3.component.ts
│   │   │   ├── comp3.service.ts
│   │   │   ├── comp3.module.ts
│   │   │   └── index.ts
│   ├── views
│   │   ├── admin
│   │   │   ├── admin.module.ts
│   │   │   ├── admin-routing.module.ts
│   │   │   ├── page1 <== Here I show comp1
│   │   │   ├── page2 <== Here I show comp2
│   │   │   ├── page3 <== Here I show comp3

一个模块将所有组件组合在一起？ 在这种情况下，每次加载模块时，它会加载这个memory中的所有组件吗？

src/
├── app
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── app-routing.module.ts
│   ├── components
│   │   ├── comp1
│   │   │   ├── comp1.component.ts
│   │   ├── comp2
│   │   │   ├── comp2.component.ts
│   │   ├── comp3
│   │   │   ├── comp3.component.ts
│   │   │   ├── comp3.service.ts
│   │   ├── comps.module.ts <=== // group all components in one module
│   │   ├── index.ts
│   ├── views
│   │   ├── admin
│   │   │   ├── admin.module.ts
│   │   │   ├── admin-routing.module.ts
│   │   │   ├── page1 <== Here I show comp1
│   │   │   ├── page2 <== Here I show comp2
│   │   │   ├── page3 <== Here I show comp3

有什么建议吗？

Answer 1

是的，在 angular 中，当您加载一个模块时，它的所有组件都会被加载。 您可以为您不想在启动时加载的不同功能创建功能模块。 （这是通过延迟加载完成的。）

所以结构会是这样的

核心模块 -> 启动时所需的所有组件

特色模块 -> 稍后将按需加载。

在 angular9 中，他们也提供了延迟加载组件的功能。 现在，即使模块已加载，您也可以延迟加载组件。 https://johnpapa.net/angular-9-lazy-loading-components/

Answer 2

没有严格的规定。 这取决于组件。

通常它是混合的。 代表“页面”的组件（例如，像您的管理区域这样的顶级路由）是一个很好的模块。 对于仅在单个页面中使用的“较小”组件，将它们放入同一个模块中是有意义的。

从不同的“页面”模块多次使用的其他组件应该进入它们自己的模块。

组件的大小也是一个考虑因素。 模块越大，提取更小的模块可能越好。