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

沒有嚴格的規定。 這取決於組件。

通常它是混合的。 代表“頁面”的組件（例如，像您的管理區域這樣的頂級路由）是一個很好的模塊。 對於僅在單個頁面中使用的“較小”組件，將它們放入同一個模塊中是有意義的。

從不同的“頁面”模塊多次使用的其他組件應該進入它們自己的模塊。

組件的大小也是一個考慮因素。 模塊越大，提取更小的模塊可能越好。