Angular中导入Module A与Module A导出A-component的区别是什么？

这俩操作是配套关系，不是二选一，单独做其中一个都没法让Module B正常使用A-component，得配合起来才行，具体区别拆解如下：

1. 在Module A中将A-component加入exports数组 #

这一步是给A-component开「对外访问权限」。Angular模块里declarations声明的组件默认是模块内部私有的，只有被加入exports的组件、指令、管道，才允许被其他导入了该模块的外部模块使用。

举个代码例子：

// module-a.ts
@NgModule({
  declarations: [AComponent],
  exports: [AComponent] // 把AComponent暴露给外部模块
})
export class ModuleA {}

如果缺了这一步，哪怕Module B导入了Module A，也看不到AComponent，编译时会直接报错说组件未注册。

2. 在Module B中导入Module A #

这一步是让Module B「获取Module A对外暴露的内容」。相当于给Module B开了个通道，能拿到Module A通过exports开放出来的所有组件、指令、管道。

代码例子：

// module-b.ts
@NgModule({
  imports: [ModuleA], // 引入ModuleA的对外暴露内容
  declarations: [BComponent]
})
export class ModuleB {}

这时候BComponent的模板里就能正常写<app-a-component></app-a-component>了，但前提是Module A已经把AComponent加入了exports。

单独操作的无效场景 #

• 只在Module A加exports，但Module B不导入Module A：Module B完全不知道Module A的存在，根本用不了AComponent。
• 只在Module B导入Module A，但Module A没把AComponent加入exports：Angular会判定AComponent是Module A的内部私有组件，禁止外部使用，直接报错。

额外提醒 #

别想着直接在Module B的declarations里声明AComponent——Angular规定一个组件只能属于一个模块，这么干会直接触发“组件已被其他模块声明”的报错，唯一合法的跨模块共享方式就是「Module A exports + Module B imports」。

内容的提问来源于stack exchange，提问作者hazem_bensaid