首页 >> js开发 >> js关于angular引入ng-zorro的问题浅析js大全
js关于angular引入ng-zorro的问题浅析js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
ng-zorro的官网上提供了两种在项目中添加ng-zorro的方法,下面记录其提供的第二种自行构建的方式。ng-zorro第一步:执行该命令创建新的angular项目,若没安装angular/cli请执行安装
ng new new-project
ng new new-project
第二步:添加ng-zorro
npm install ng-zorro-antd --save
npm install ng-zorro-antd --save
第三步:引入模块在app.module.ts文件中引入import { NgZorroAntdModule } from 'ng-zorro-antd';
......
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
/** 导入 ng-zorro-antd 模块 **/
NgZorroAntdModule
]
......
......
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
/** 导入 ng-zorro-antd 模块 **/
NgZorroAntdModule
]
......第四步:在 angular.json 文件中引入样式
{
"assets": [
...
],
"styles": [
...
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
] }
{
"assets": [
...
],
"styles": [
...
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
] }第五步:在入口style.css或者style.less文件下引入组件样式
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */
或
@import "~ng-zorro-antd/style/entry.less"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/entry.less"; /* 引入组件样式 */
@import "~ng-zorro-antd/style/entry.less"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/entry.less"; /* 引入组件样式 */
然后在所需要的组件中使用ng-zorro就可正常使用了。总结总结
ng new new-project
ng new new-project
第二步:添加ng-zorro
npm install ng-zorro-antd --save
npm install ng-zorro-antd --save
第三步:引入模块在app.module.ts文件中引入import { NgZorroAntdModule } from 'ng-zorro-antd';
......
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
/** 导入 ng-zorro-antd 模块 **/
NgZorroAntdModule
]
......
......
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
/** 导入 ng-zorro-antd 模块 **/
NgZorroAntdModule
]
......第四步:在 angular.json 文件中引入样式
{
"assets": [
...
],
"styles": [
...
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
] }
{
"assets": [
...
],
"styles": [
...
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
] }第五步:在入口style.css或者style.less文件下引入组件样式
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */
或
@import "~ng-zorro-antd/style/entry.less"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/entry.less"; /* 引入组件样式 */
@import "~ng-zorro-antd/style/entry.less"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/entry.less"; /* 引入组件样式 */
然后在所需要的组件中使用ng-zorro就可正常使用了。总结总结
相关文章:
- jsVUE前端从后台请求过来的数据进行转换数据结构操作js大全
- jsvue router返回到指定的路由的场景分析js大全
- jsVue 防止短时间内连续点击后多次触发请求的操作js大全
- jsNodeJS模块Buffer原理及使用方法解析js大全
- JavaScriptvue.js+element 默认提示中英文操作
- jsVue 解决在element中使用$notify在提示信息中换行问题js大全
- js关于vue 项目中浏览器跨域的配置问题js大全
- jses5 类与es6中class的区别小结js大全
- js解决vue watch数据的方法被调用了两次的问题js大全
- jsJS前端基于canvas给图片添加水印js大全