Angular共享模块的使用方法

桃扇骨 2023-02-24 08:18 5阅读 0赞

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

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

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

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

![20200708192722370.png][]

可以看到在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 { }

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

[20200708192722370.png]: /images/20230209/8bff03499d04451188b995da73d688dc.png