深入理解Angular中component、standalone、module的区别及使用方式（案例详解版）_angular standalone
一、概念理解
component可以理解成.Net中的class，component是Angular中的最小组织单位。我们平常说的component都是非standalone类型的，这些组件不能在Module中被imports，需要先declarations再exports。
standalone组件可以理解成.Net中的静态类，standalone组件不需要在Module中被declarations，当Module中需要用到它们时得先imports再exports。standalone组件是一种在Angular 14版本中引入的新特性。
module可以理解成.Net中的namespace，module中可以包含component 和 standalone组件。moduleB imports引用了 moduleA，那moduleA中exports导出的内容可以直接在moduleB 对应的html页面中使用。
module还可以理解成一个大组件，这个大组件是由多个小组件（module、component、standalone组件）组合而成的。例如：body（module）由left、middle、right组成，当layout（module）需要body时我们要在layout.module.ts中 imports引用 body。若我们不仅要使用body还要使用left时，就得先在body中exports导出left，然后才能在layout中直接使用left。
二、案例讲解
示例项目文件结构如下：
app(standalone component)
|--calculator(standalone component)
|--layout(module)
|----body(module)
|------left(standalone component)
|------middle(non-standalone component)
|------right(non-standalone component)
|----header(standalone component)
|----footer(standalone component)
1、module引用component、standalone组件
body.module.ts源码如下：
import { NgModule } from \'@angular/core\';import { CommonModule } from \'@angular/common\';import { BodyComponent } from \'./body.component\';import { LeftComponent } from \'./left/left.component\';import { MiddleComponent } from \'./middle/middle.component\';import { RightComponent } from \'./right/right.component\';@NgModule({ imports: [CommonModule, LeftComponent], declarations: [BodyComponent, MiddleComponent, RightComponent], exports: [BodyComponent, LeftComponent]})export class BodyModule { }- [standalone: true] 的组件（LeftComponent）可以在Module中被imports
- 非 [standalone: true] 的组件（MiddleComponent、RightComponent）不能在Module中被imports，需要被declarations
非 [standalone: true] 的组件也不能在内部 imports 其他组件或模块 - 注意：非 [standalone: true] 的组件自己无法进行declarations，它们跟 [standalone: true] 的组件一样在 xxx.component.ts 本组件代码内部先 export class XxxComponent {}，这样才可以在Module中先由import引入进来，之后再进行imports、declarations
- 无论 module、component 还是 standalone 组件，都可以在Module中被exports
- body.module.ts 中 declarations: [BodyComponent, MiddleComponent, RightComponent]，
则body.component.html中可以直接使用、，也可以直接使用imports引用的内容（和CommonModule）
则middle.component.html中可以直接使用，right.component.html中可以直接使用，但这两句不能同时使用因为会造成循环引用 - body.module.ts 中 imports: [CommonModule, LeftComponent]，
则body.component.html中可以直接使用
2、module引用module
layout.module.ts源码如下：
import { NgModule } from \'@angular/core\';import { CommonModule } from \'@angular/common\';import { LayoutComponent } from \'./layout.component\';import { HeaderComponent } from \'./header/header.component\';import { FooterComponent } from \'./footer/footer.component\';import { BodyModule } from \'./body/body.module\';import { RightComponent } from \'./body/right/right.component\';@NgModule({ imports: [CommonModule, BodyModule, HeaderComponent, FooterComponent], declarations: [LayoutComponent], exports: [LayoutComponent, BodyModule, HeaderComponent, FooterComponent]})export class LayoutModule { }- layout.module.ts引用了BodyModule之后，可以直接在layout.component.html中使用、，但是不能直接使用
因为body.module.ts中exports已经导出了BodyComponent、LeftComponent，没导出MiddleComponent。
由此说明exports具有继承性，当组件具有层级结构时我们应该尽量在相邻的父组件中exports子组件，这样后续只要imports了父组件就能直接使用子组件，不需要再次imports - 若想在layout.component.html中使用，需要在body.module.ts中导出对应的组件，exports: [BodyComponent, LeftComponent, MiddleComponent]
- 若想在footer.component.html中使用，需要在body.module.ts中导出对应的组件，exports: [BodyComponent, LeftComponent, MiddleComponent]，然后在footer.component.ts中imports: [BodyModule]。
- 紧接上一点：
一个组件、指令或管道只能被一个模块声明一次，所以footer.component.ts不可以再次声明MiddleComponent，而MiddleComponent是一个非 [standalone: true] 组件无法直接被imports，因此就只能通过imports: [BodyModule]来使用 - declarations中声明的对象最好也进行exports导出，这样才能被其他Module或component使用
- 对于 [standalone: true] 的组件之间相互引用，直接imports即可
例如：如果想在footer.component.html中使用，那需要在footer.component.ts中imports: [LeftComponent]；
或者imports: [BodyModule]也行，因为body.module.ts中exports: [BodyComponent, LeftComponent]包含了LeftComponent
三、总结
看到这里相信大家已经对component、standalone、module的概念及其相互之间如何引用有一个清楚地概念了，内容并不高深但却是Angular开发的必备基石，如果对您有帮助的话，请点赞、收藏、评论支持下，谢谢大家。
