面试题：Angular共享模块设计之基础结构

Question

在Angular中设计共享模块时，通常会包含哪些常见的内容，比如服务、组件、管道等，以一个简单的项目场景为例，阐述如何将这些内容合理地组织到共享模块中，使其能被多个其他模块复用？

Answer 1

共享模块常见内容

1. 服务：可复用的业务逻辑，如数据获取服务。例如在电商项目中，商品数据获取服务ProductService，用于从后端API获取商品列表、详情等数据。
2. 组件：通用的展示组件。像电商项目中的ProductCardComponent，用于展示单个商品的图片、名称、价格等信息，可在商品列表页和相关推荐模块复用。
3. 管道：数据格式化处理。如CurrencyPipe，在电商项目中格式化商品价格为特定货币格式。
4. 指令：用于DOM操作或添加特定行为。例如HighlightDirective，在商品列表中突出显示热门商品。

组织到共享模块的方式

1. 创建共享模块：使用Angular CLI命令ng generate module shared生成共享模块SharedModule。
2. 组织服务：在shared目录下创建services文件夹，将ProductService等服务放入，在SharedModule的providers数组中注册服务，如：

import { NgModule } from '@angular/core';
import { ProductService } from './services/product.service';

@NgModule({
  providers: [ProductService]
})
export class SharedModule {}

3. 组织组件：在shared目录下创建components文件夹，将ProductCardComponent等组件放入，在SharedModule的declarations数组中声明组件，同时添加到exports数组以便其他模块使用，如：

import { NgModule } from '@angular/core';
import { ProductCardComponent } from './components/product - card.component';

@NgModule({
  declarations: [ProductCardComponent],
  exports: [ProductCardComponent]
})
export class SharedModule {}

4. 组织管道：在shared目录下创建pipes文件夹，将CurrencyPipe等管道放入，在SharedModule的declarations数组中声明管道，并添加到exports数组，如：

import { NgModule } from '@angular/core';
import { CurrencyPipe } from './pipes/currency.pipe';

@NgModule({
  declarations: [CurrencyPipe],
  exports: [CurrencyPipe]
})
export class SharedModule {}

5. 组织指令：在shared目录下创建directives文件夹，将HighlightDirective等指令放入，在SharedModule的declarations数组中声明指令，并添加到exports数组，如：

import { NgModule } from '@angular/core';
import { HighlightDirective } from './directives/highlight.directive';

@NgModule({
  declarations: [HighlightDirective],
  exports: [HighlightDirective]
})
export class SharedModule {}

6. 在其他模块中使用：在需要复用共享模块内容的模块（如ProductListModule）中导入SharedModule，即可使用共享模块中的服务、组件、管道和指令。

import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [SharedModule]
})
export class ProductListModule {}