Angular共享模块的使用方法

在Angular使用过程中，如果我们创建完主要的功能模块后，发现功能模块中其实会有很多功能一样的小组件，或者存在一些需要额外实现的功能组件，此时我们可以创建一个共享的模块，这个模块可以为整个工程提供引用服务

创建方法可以自己建立一个文件夹，然后再在这个文件夹下面进入CMD正常使用ng命令创建自己需要的组件模块，随后再在这整个文件夹下写一个ts文件，这个文件相当于在配置所有共享文件的导入导出(个人理解)。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

需要导入common模块来确定这是一个共享模块，并且所有共享的模块必须放在同一个目录下，演示目录结构如下所示

 可以看到在share-module下的其他模块都是创建的共享组件，而最后的share-module.module.ts是一个定义导入导出的文件，详情如下

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PositionSelectListComponent } from './position-select-list/position-select-list.component';
import { DateScrollSelectComponent } from './date-scroll-select/date-scroll-select.component';
import { SideViewComponent } from '@app/exam-module/side-view/side-view.component';
import { EditableDropdownComponent } from './editable-dropdown/editable-dropdown.component';
import { FormsModule } from '@angular/forms';
import { SelectDropdownComponent } from './select-dropdown/select-dropdown.component';
import { DoseFormComponent } from './dose-form/dose-form.component';
import { RegisterInputboxComponent } from './register-inputbox/register-inputbox.component';
import { ProcedureBoxComponent } from './procedure-box/procedure-box.component';
import { IconSvgComponent } from './icon-svg/icon-svg.component';
import { ProcedureTimebarComponent } from './procedure-timebar/procedure-timebar.component';
import { PatientCardComponent } from './patient-card/patient-card.component';
import { ParamsInputboxComponent } from './params-inputbox/params-inputbox.component';
import { ParamsSlideboxComponent } from './params-slidebox/params-slidebox.component';
import { ParamsScrollboxComponent } from './params-scrollbox/params-scrollbox.component';
import { PrSearchboxComponent } from './pr-searchbox/pr-searchbox.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [
    SideViewComponent,
    PositionSelectListComponent,
    DateScrollSelectComponent,
    EditableDropdownComponent,
    SelectDropdownComponent,
    DoseFormComponent,
    RegisterInputboxComponent,
    ProcedureBoxComponent,
    IconSvgComponent,
    ProcedureTimebarComponent,
    PatientCardComponent,
    ParamsInputboxComponent,
    ParamsSlideboxComponent,
    ParamsScrollboxComponent,
    PrSearchboxComponent
  ],
  exports: [
    SideViewComponent,
    PositionSelectListComponent,
    DateScrollSelectComponent,
    EditableDropdownComponent,
    SelectDropdownComponent,
    DoseFormComponent,
    RegisterInputboxComponent,
    ProcedureBoxComponent,
    IconSvgComponent,
    ProcedureTimebarComponent,
    PatientCardComponent,
    ParamsInputboxComponent,
    ParamsSlideboxComponent,
    ParamsScrollboxComponent,
    PrSearchboxComponent
  ]
})
export class ShareModuleModule { }

像这样就构成了一个共享的模块，在其他功能模块的板块可以直接调用