這次給大家?guī)?lái)Angular集成三方UI框架、控件使用詳解，Angular集成三方UI框架、控件的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

step 1:

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

step 2:

npm?install?--save?@angular/animations

step 3:

angular.cli?

../node_modules/@angular/material/prebuilt-themes/indigo-pink.css

or

style.css

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

step 4：

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" rel="stylesheet">

step 5:

??app.module.ts
??import?{MatInputModule,?MatCardModule,?MatButtonModule}?from?"@angular/material";
??import?{BrowserAnimationsModule}?from?'@angular/platform-browser/animations';
??imports:[
????BrowserAnimationsModule,
????MatInputModule,
????MatCardModule,
????MatButtonModule,
??]

安裝 Ag-grid 的方法

Ag-grid 官網(wǎng)：https://www.ag-grid.com/

step 1：

npm?install?--save?ag-grid-angular?ag-grid

step 2：

angular.cli

"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/ag-theme-fresh.css"

step 3:

app.module.ts

imports:[
??AgGridModule.withComponents([])
],
exports:[
??AgGridModule
]

安裝 NG-ZORRO 的方法

NG-ZORRO 官網(wǎng)：https://ng.ant.design/version/0.7.x/docs/introduce/zh

step 1:

npm?install?ng-zorro-antd?--save

step 2:

直接用下面的代碼替換 /src/app/app.module.ts 的內(nèi)容

注意：在根 module 中需要使用 NgZorroAntdModule.forRoot()，在子 module 需要使用 NgZorroAntdModule

import?{?BrowserModule?}?from?'@angular/platform-browser';
import?{?BrowserAnimationsModule?}?from?'@angular/platform-browser/animations';
import?{?NgModule?}?from?'@angular/core';
import?{?FormsModule?}?from?'@angular/forms';
import?{?HttpClientModule?}?from?'@angular/common/http';
import?{?NgZorroAntdModule?}?from?'ng-zorro-antd';
import?{?AppComponent?}?from?'./app.component';
@NgModule({
?declarations:?[
??AppComponent
?],
?imports:?[
??BrowserModule,
??FormsModule,
??HttpClientModule,
??BrowserAnimationsModule,
??NgZorroAntdModule.forRoot()
?],
?bootstrap:?[AppComponent]
})
export?class?AppModule?{?}

step 3:

修改 .angular-cli.json 文件的 styles 列表

"styles":?[
??"../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
]

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

Angular CLI進(jìn)行單元與E2E測(cè)試步驟詳解

Vue文檔使用案例總結(jié)

Vue中調(diào)用百度地圖插件

以上是Angular集成三方UI框架、控件使用詳解的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！