2020年听过很多同行都说Vue、React、Angula前端三大框架，现在是Vue的天下了。我觉得如果这样理解就太片面了，毕竟每个框架都有自己的优缺点。今天就给大家分享几个在Angular开发中能快速提升开发效率的UI组件库。

1、Angular/Material

Angular官方出品的 Material Design 风格的UI组件库。

安装

$ npm i @angular/material -S

使用

// 引入组件import { NgModule } from '@angular/core';import { MatButtonModule, MatCheckboxModule } from '@angular/material';@NgModule({  ...  imports: [MatButtonModule, MatCheckboxModule],  ...})export class AppModule { }// 模板中使用<button mat-button>Basic</button><mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>

2、NG-ZORRO

阿里巴巴团队推出的 Ant Design 风格Angular实现，主要用于企业级中后台产品。

Ant Design UI 的 Angular 实现，开发和服务于企业级中后台产品，开箱即用的高质量 Angular 组件。

安装

$ npm i ng-zorro-antd -S

使用

// 引入组件import { NgModule } from '@angular/core';import { NzButtonModule } from 'ng-zorro-antd/button';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    NzButtonModule  ]})export class AppModule { }// 模板中使用<button nz-button nzType="primary">Primary</button>

饿了么团队出品的基于 Angular.js 桌面端组件库。

目前用户活跃度不高，因此，功能还不够完善，不够成熟。不过既然是饿了么团队开发的，可以尝试使用。

安装

$ npm i element-angular -S

使用

import { BrowserModule } from '@angular/platform-browser'// import moduleimport { ElModule } from 'element-angular'// if you use webpack, import styleimport 'element-angular/theme/index.css'@NgModule({  imports: [    BrowserModule,    ElModule.forRoot(),    ...  ],    ...  bootstrap: [ExAppComponent],})// componentstemplate: '<el-button>Hello World</el-button>'

一套丰富的 UI 组件库，拥有80多种组件。

安装

$ npm i primeng primeicons -S

使用

// 引入组件import { NgModule } from '@angular/core';import { ButtonModule } from 'primeng/button';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    ButtonModule  ]})export class AppModule { }// 模板中使用<button pButton type="button" label="Click" ></button><p-button label="Click" ></p-button>

基于 Teradata 平台构建的 Material 风格的一套丰富 UI 组件库。

安装

$ npm i @covalent/core -S## (optional) Additional Covalent Modules installs$ npm i @covalent/http @covalent/highlight @covalent/markdown @covalent/dynamic-forms @covalent/echarts -S

使用

import { NgModule } from '@angular/core';import { CovalentLayoutModule } from '@covalent/core/layout';import { CovalentStepsModule  } from '@covalent/core/steps';/* any other core modules */// (optional) Additional Covalent Modules importsimport { CovalentHttpModule } from '@covalent/http';import { CovalentHighlightModule } from '@covalent/highlight';import { CovalentMarkdownModule } from '@covalent/markdown';import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';import { CovalentBaseEchartsModule } from '@covalent/echarts/base';// other imports @NgModule({  imports: [    CovalentLayoutModule,    CovalentStepsModule,    // (optional) Additional Covalent Modules imports    CovalentHttpModule.forRoot(),    CovalentHighlightModule,    CovalentMarkdownModule,    CovalentDynamicFormsModule,    CovalentBaseEchartsModule,  ],  ...})export class AppModule { }

基于 Bootstrap 风格的 Angular 组件库。

安装

$ npm i ngx-bootstrap -S

使用

import { NgModule } from '@angular/core';import { TooltipModule } from 'ngx-bootstrap/tooltip';@NgModule({  ...  imports: [TooltipModule.forRoot(),...]  ...})export class AppModule { }// 模板中使用<button type="button" class="btn btn-primary"        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">  Simple demo</button>

这次就分享到这里，如果小伙伴们有比较好的Angular组件库，可以在下方进行留言讨论，非常期待你的分享！

❤️ 最后

如果觉得这篇文章对你有帮助，点个「关注/转发」，让更多的人也能看到你的分享！