Angular 14 跨项目复用组件的最佳编码实践及实现方法

一、现有两种导入方法的对比与最佳选择 #

方法1：CLI生成组件后替换代码 #

优势：Angular CLI自动完成模块声明、路径配置、selector生成等工作，几乎不会出现配置错误，适合中级开发者快速导入少量组件，避免手动配置的疏漏。
实现步骤：

1. 用CLI生成组件（推荐放到统一的shared目录管理）：

   ng g c shared/hero-card
   

2. 打开生成的hero-card.component.ts、.html、.css文件，将教程项目中的对应代码替换进去，保留CLI自动生成的@Component装饰器配置（比如selector: 'app-hero-card'、templateUrl路径），除非你需要自定义selector或路径。
3. CLI已自动将组件添加到app.module.ts的declarations数组，无需手动修改。
4. 在目标组件模板中使用组件：

   <app-hero-card></app-hero-card>
   

方法2：直接复制组件文件后手动配置 #

优势：跳过CLI生成步骤，适合对Angular模块结构非常熟悉的开发者批量导入组件；劣势：需手动处理所有配置，容易遗漏模块声明、路径修正等环节，出错概率高。
实现步骤：

1. 从教程项目复制组件的.ts、.html、.css文件（.spec.ts可选）到当前项目的src/app/shared目录。
2. 打开组件的.ts文件，检查@Component中的路径配置：

   @Component({
     selector: 'app-hero-card',
     templateUrl: './hero-card.component.html', // 确保路径与当前目录结构匹配
     styleUrls: ['./hero-card.component.css']
   })
   

3. 在app.module.ts中手动导入并声明组件：

   import { HeroCardComponent } from './shared/hero-card/hero-card.component';
   
   @NgModule({
     declarations: [
       // ...其他组件
       HeroCardComponent
     ]
   })
   

4. 若组件是路由组件，需在app-routing.module.ts中添加路由配置：

   const routes: Routes = [
     // ...其他路由
     { path: 'hero-details', component: HeroCardComponent }
   ];
   

最佳实践结论：如果只是临时导入少量组件，优先选方法1，减少配置错误；如果批量导入且你对Angular配置逻辑非常熟悉，可选用方法2，但需逐一检查每个组件的配置。

二、组件库：长期复用的最佳方案 #

如果需要在多个Angular应用中复用这些组件，构建独立的Angular组件库是专业的长期解决方案，具体实现步骤如下：

1. 创建组件库：在当前项目根目录（或单独的工作区）运行CLI命令：

   ng generate library my-shared-components
   

   CLI会自动创建projects/my-shared-components目录，包含库的基础结构。

2. 迁移组件到库中：

   • 将教程项目中的组件复制到projects/my-shared-components/src/lib目录，比如src/lib/hero-card。
   • 修改组件的selector，建议添加lib-前缀避免与其他应用的组件冲突：

     @Component({
       selector: 'lib-hero-card',
       templateUrl: './hero-card.component.html',
       styleUrls: ['./hero-card.component.css']
     })
     

3. 导出组件供外部使用：
   在projects/my-shared-components/src/public-api.ts中添加组件导出语句：

   export * from './lib/hero-card/hero-card.component';
   

4. 构建组件库：

   ng build my-shared-components
   

   构建完成后，库文件会生成在dist/my-shared-components目录。

5. 在当前应用中使用库：

   • 若在同一个工作区，直接在app.module.ts中导入并声明组件：

     import { HeroCardComponent } from 'my-shared-components';
     
     @NgModule({
       declarations: [
         // ...其他组件
         HeroCardComponent
       ]
     })
     

   • 在模板中使用：

     <lib-hero-card></lib-hero-card>
     

   • 若需在其他独立应用中使用，可将库发布到私有npm仓库，或通过npm link本地关联后，执行npm install my-shared-components导入。

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