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>