目录

1.PrimeNG

2.Material

3.Rebirth NG

4.NG-ZORRO

5.总结

一、PrimeNG

    官网连接： https://www.primefaces.org/primeng/#/

    简单介绍： PrimeNG，大而全的一个插件库，提供了超过70种的组件和多种主题供开发者选择，能够应付大部分的业务场景，但是灵活性比较差，在对样式细节要求比较高的场景下组件的样式修改会显得非常麻烦，并且对数据格式要求的比较死，对定制个人的组件不友好。官方对一些bug修复的比较慢。现在趋于一个比较稳定的状态，部分组件如table的坑比较多。

    使用方法：

    1、安装

npm install primeng --save

    2、添加所需要的模块，在app.module.ts或需要使用到的module中添加

import {   DataTableModule,   CalendarModule,   MultiSelectModule,   DropdownModule,   PanelModule,   DialogModule,   SharedModule as PrimeSharedModule } from "primeng/primeng";    @NgModule({   imports: [     PrimeSharedModule,     DataTableModule,     PaginatorModule,     CalendarModule,     MultiSelectModule,     DropdownModule,     PanelModule,     DialogModule,   ], }

    3、直接在index.html里添加样式或者通过配置angular.json里的styles来添加

直接在index.html里添加  <link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" /> <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />

配置styles  "styles": [   "../node_modules/font-awesome/css/font-awesome.min.css",   "../node_modules/primeng/resources/primeng.min.css",   "../node_modules/primeng/resources/themes/omega/theme.css",   //... ],

    4、引入animations

npm install @angular/animations --save 

import {BrowserModule} from '@angular/platform-browser'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations';  @NgModule({     imports: [         BrowserModule,         BrowserAnimationsModule,         //...     ],     //... }) export class YourAppModule { }

    个人体验：我是在去年给联想做后台系统的时候用到了primeng这个插件库，一开始看了primeng的文档再结合项目的功能分析的时候发现primeng直接能够满足不少使用场景当时第一感觉是这个插件库简直太强大了，但到了实际项目中发现primeng是由其jQuery版本过渡来的，遗留了不少jQuery插件的影子，一些可以用伪类实现的功能还是通过样式的增删节点的修改来实现的，想更改一个功能显得相当复杂，而其样式与bootstrap有冲突，且划分的特别不清晰导致修改css的时候经常导致别的组件直接不能用。官方对bug的修复也不太到位，在坑最多的table里面会出现两个属性冲突导致两个属性都无法使用的情况，我曾经因为使用了换列和调整列宽的功能冲突查了一天的修复方法，最后在官方文档里发现说是在一个月前最新版已经修复了这个问题但是更新后发现其实并没有修复，甚至上周群里还有朋友在说这个问题。感觉就是管方维护的力度其实不是很够的。

    适用场景：业务需求比较明确，对样式自定义要求不高，能在primeng中找到对应组件且直接使用就能满足业务要求的不需要功能拓展的场景。

二、Material

    官网连接： https://material.angular.io/components/autocomplete/overview

    简单介绍： 官方开发的插件库，轻量级，组件不多功能也不算特别丰富，样式和动画这块做的不错继承了google的meterial design。有强大的官方背景，但是因为过渡追求完美反而插件的量上不去，相关的资料也比较少，文档一度更新不及时，社区有在其基础上拓展出了ng2-material，貌似不错。

    使用方法：

    1、安装

npm install --save @angular/material @angular/cdk

    2、引入animation

npm install --save @angular/animations 

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';  @NgModule({   ...   imports: [BrowserAnimationsModule],   ... }) export class PizzaPartyAppModule { }

3、在module中引入

import {MdButtonModule, MdCheckboxModule} from '@angular/material';  @NgModule({   ...   imports: [MdButtonModule, MdCheckboxModule],   ... }) export class PizzaPartyAppModule { }

4、在style.css中引入主题样式

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

5、引入hammerjs

npm install --save hammerjs 

app.module.ts中引入  import 'hammerjs';

    个人体验：初用material是在二月份左右，当时是因为不堪primeng的深坑所以想在下个项目里换插件库，第一次用的时候发现文档是跟版本脱节的，包括组件的用法都跟文档上说的不一样，所以感觉不是很方便，经常需要去google报错。之后在自己练手的一个项目上又尝试使用了一下，觉得material很多组件其实都很初级，组合起来其实也是比较方便的，样式的修改上也还行。但是因为组件很基础所以个人的开发量其实会有一定的增加，而且更新速度太慢了，完全不觉得跟二月份的时候组件的数量有什么提升，用来做个人的spa应用还行，大型的商业项目我觉得还是不要用了，因为确实缺少了不少常用的组件，无论是自己再去写还是引入别的插件库感觉都不是很舒服。

    适用场景：轻量级，需要快速启动的SPA应用。

三、Rebirth NG

    官网连接： https://greengerong.github.io/rebirth-ng/#/gettingStarted

    简单介绍： 破狼老师开发的一款插件库，现在还比较小众，但据我所知其实破狼老师已经在不少项目里使用到了rebirth-ng，一开始是以快速启动公司内部项目为目的开发的，熟悉后能够非常快速的启动项目，跟周围朋友推广过几次反馈都不错。rebirth-ng一开始就考虑到了样式的修改和组件修改的灵活性等问题，所以个人样式的定制非常的舒服。对问题的反馈也比较及时，在ng-zorro出来前我个人觉得rebirth-ng用起来是最舒服的一个插件库。

    使用方法： https://greengerong.github.io/rebirth-ng/#/gettingStarted

    个人体验：丰富的组件，数据驱动，对很多东西都进行标准化的封装，问题的修复速度很快，破狼老师个人之前做的datatable性能也很不错，但是现在这块删除了，需要自己去选择对应的datatable来使用，这点可能比较麻烦。上手难度方面跟跟大多数插件库类似，不过因为是小团队在维护，所以文档方面有的地方没有把组件的详细属性全部列清，有时候我会直接去看源码来确认属性的功能。在组件数量方面不如primeng多，略多于ng-zorro，一开始的时候破狼老师对公司内部的几个项目进行了分析做出了当时几个项目中用到的组件的rebirth-ng版本，并对一些常用的组件进行了封装以数据驱动为目的进行了封装。对我个人而言是完全取代了primeng的存在。

    适用场景： 企业后台管理系统

四、NG-ZORRO

    官网连接： https://ng.ant.design/#/docs/angular/introduce

    简单介绍： 这个估计现在用angular的都听说过了，继承了ant design的风格，文档非常清晰，上手很友好，现在还处于发布不久快速更新的状态，每周都会发布一个修复bug优化的小版本，常用的组件也比较多了，虽然暂时比不上插件狂魔primeng。横向对比react的版本还有非常大的提升空间，加上这次react的事情之后zorro得到的资源应该会更多。

    使用方法：https://ng.ant.design/#/docs/angular/introduce

    个人体验：清晰的文档，上手很快，虽然不是数据驱动要自己去写很多重复的内容，封装组件但是还是比较方便的，之前有人评价zorro是垃圾库我也是比较无语的。现阶段还不算特别稳定，有一些bug，datatable的功能也比较简单，有的功能需要自己参考例子去封装实现这点比较麻烦，但相信之后会不断完善。社区对zorro的期待和支持力度成正比，很有前景的一个组件库。现阶段使用还需要养成及时更新版本的习惯，一般每周末都会更新一个小的版本，周一花半个小时做更新就好。

    适用场景：后台管理系统

五、总结

    简单总结一下自己对这几个插件的认识，比较肤浅有错误的地方欢迎大家指正，基本概括下来就是，material小而灵活但是不适用于大型场景，和对组件封装能力不熟练的使用者；primeng大而全，是现阶段比较成熟的选择，但是灵活性太差，整体的设计思想也比较落后，坑多慎入；rebirth-ng相对小众但无论是设计理念和完成度都非常不错，很适合快速启动项目，建议如果要选择primeng的朋友可以考虑下rebirth-ng；zorro的背景和资源目前看来都是最为强势的一个库，现在还处于成长期不太稳定，可以先观望一段时间，但相信过段时间应该会变得相对成熟很多，现有的组件其实也已经足够应对大多数场景了，推荐学习angular的朋友可以学习一下。