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

该模块将所有组件分组吗？在这种情况下，每次加载模块时，模块都会加载该存储器中的所有组件吗？

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

是的，在加载模块时，以成角度的方式加载了其所有组件。您可以为您不想启动时加载的不同功能创建功能模块。 （这是通过延迟加载完成的。）

所以结构会像这样

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

功能模块->稍后将按需加载。

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

Answer 2

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

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

其他在不同“页面”模块中多次使用的组件应进入各自的模块。

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