如何在AppModule、AdminModule、XLModule中复用AppHeader组件？

嘿，我太懂你这种赶时间直接复制组件的操作了——我赶项目deadline的时候也干过好几次！现在咱们把这个AppHeader改成能在三个模块里复用的正确姿势，其实几步就能搞定：

1. 创建一个共享模块（SharedModule） #

Angular里跨模块复用组件的标准方案就是用共享模块，把需要在多个模块里使用的组件、指令、管道都集中到这里管理。

首先生成这个模块（或者手动创建）：

ng generate module shared

然后在SharedModule里声明并导出你的AppHeaderComponent：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入你的AppHeader组件，注意路径要和实际项目匹配
import { AppHeaderComponent } from '../app/app-header/app-header.component';

@NgModule({
  declarations: [
    // 声明要复用的组件
    AppHeaderComponent
  ],
  imports: [
    // 导入组件依赖的基础模块，比如CommonModule（*ngIf、*ngFor这些指令都在这里）
    CommonModule
    // 如果AppHeader用到了RouterModule的routerLink，这里也要导入RouterModule
    // RouterModule.forChild([])
  ],
  exports: [
    // 关键！必须导出组件，其他模块导入SharedModule才能访问到它
    AppHeaderComponent
    // 如果其他模块也需要用CommonModule，也可以在这里导出，这样其他模块就不用重复导入了
    // CommonModule
  ]
})
export class SharedModule { }

2. 修改各个功能模块的配置 #

接下来把原来的模块都改成导入SharedModule，不用再单独声明组件：

• AppModule：把AppHeaderComponent从declarations数组里删掉（Angular规定一个组件只能在一个模块里声明），然后在imports里添加SharedModule。
• AdminModule和XLModule：直接在它们的imports数组里加入SharedModule，之后就能在这两个模块的任何组件模板里直接用<app-header></app-header>了！

3. 清理冗余代码 #

最后把之前复制出来的AdminHeaderComponent文件删掉，同时清理AdminModule里和它相关的导入、声明，让代码回归整洁。

这样改完之后，你的AppHeader就能在三个模块里共享使用了，以后要修改头部逻辑，只需要改这一个组件就行，再也不用维护多个副本啦！

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