Angular項目中引入第三方UI庫的方法

這篇文章給大家分享的是有關Angular項目中引入第三方UI庫的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

環境:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Node: 12.18.3

• npm : 6.14.6

• IDE: VSCode

1. 第三方UI庫的選擇

Angular開發，除非你只有簡單一兩個頁面，否則引入第三方UI庫就是必不可少的。而具體用哪個庫，就需要考慮多方面的東西了。

比如：

• 流行程度

• 版本更新情況 （是否能跟進anuglar更新，bug是否及時修復）

• UI風格，是否適用于項目

• 入手難易程度

• 文檔完善程度

市面上有很多Angular可用的類庫，可用根據項目、企業情況去選擇。簡單列一下可選的UI庫。

• Angular Material: angular 官方UI庫。https://material.angular.io/

• clarity: 國外的一套比較流行的框架， https://clarity.design/。

• NG-ZORRO: 阿里Ant Design的Angular版本。 https://ng.ant.design/docs/introduce/en

• Element Angular：國內非常流行的基于Vue的Element，同樣有Angular版本。 https://element-angular.faas.ele.me/

• Kendo UI。很多很強大，只是要收費。https://www.telerik.com/kendo-angular-ui

2. Angular Material

2.1. 優缺點

2.1.1. 優點

• 官方UI組件

• 最標準的Material實現

• 緊跟Angular核心組件的更新進度

• 官方支持與Angular的同步升級

2.1.2. 缺點

• 組件不像其他框架那么多，但是基本夠用

• 風格不是特別像國內的框架

2.2. 引入到項目

1、根目錄下執行下面命令：

ng add @angular/material

2、import 到頁面所屬的module，或者是app.module.ts中。

// import MatSliderModule
import { MatSliderModule } from '@angular/material/slider';

…
@NgModule ({....
  imports: [...,
  MatSliderModule,
…]
})

3. 總結

• 第三方組件各有優缺點

• 根據公司、項目的需求去選擇

• Angular Material升級更容易，官方支持。

感謝各位的閱讀！關于“Angular項目中引入第三方UI庫的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！