angular自定义共享模块

在开发项目过程中，我们常常遇到一些功能相似，UI相同的组件；这时候，我们会希望通过写一个能用公用的组件，来提升我们的开发效率。

以开发一个分页组件为例，我们来看看如何使用share component：

开发背景：Angular 7 + Angular Material；

首先，我们先来创建一个component放在common文件夹中（common文件夹是放所有公用组件的地方）：

ng generate compoment  paginator

然后呢，创建 paginator.module.ts ，在这个文件中，我们要做一些改动：

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

import { PaginatorComponent } from './paginator.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    PaginatorComponent
  ],
  imports: [
    CommonModule,  //引入需要的模块
    FormsModule
  ],
  exports:[PaginatorComponent],   //export出去
  bootstrap: [PaginatorComponent]
})
export class PaginatorModule { }

到这里，只是完成了第一步；接下来，我们要进入app.module.ts文件中，做一些修改，引入该模块：

这样，基本工作已经做完；接下来就可以在相应的页面引用该组件了：

<app-paginator> </app-paginator>