您好,欢迎访问一九零五行业门户网

Angular使用UI框架、控件

这次给大家带来angular使用ui框架、控件,angular使用ui框架、控件的注意事项有哪些,下面就是实战案例,一起来看一下。
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 官网: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 官网: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 的内容
注意:在根 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]
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
css的新属性display:box使用方法
h5触摸事件中如何判断用户滑动方向
以上就是angular使用ui框架、控件的详细内容。
其它类似信息

推荐信息