angular自定义共享模块_angular公共模块定义-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32490291/article/details/87934844

本文介绍了在Angular项目中创建和使用自定义共享模块的方法，以分页组件为例，详细阐述了从创建组件到导入模块的步骤，旨在提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发项目过程中，我们常常遇到一些功能相似，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文件中，做一些修改，引入该模块：
在这里插入图片描述
这样，基本工作已经做完；接下来就可以在相应的页面引用该组件了：