服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - 关于angular引入ng-zorro的问题浅析

关于angular引入ng-zorro的问题浅析

2021-09-22 17:17FisherKai JavaScript

这篇文章主要给大家介绍了关于angular引入ng-zorro的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

ng-zorro的官网上提供了两种在项目中添加ng-zorro的方法,下面记录其提供的第二种自行构建的方式。

第一步:执行该命令创建新的angular项目,若没安装angular/cli请执行安装

?
1
ng new new-project

第二步:添加ng-zorro

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

第三步:引入模块

在app.module.ts文件中引入

import { NgZorroAntdModule } from 'ng-zorro-antd';

?
1
2
3
4
5
6
7
8
9
10
......
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
/** 导入 ng-zorro-antd 模块 **/
NgZorroAntdModule
]
......

第四步:在 angular.json 文件中引入样式

?
1
2
3
4
5
6
7
8
{
"assets": [
...
],
"styles": [
...
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
] }

第五步:在入口style.css或者style.less文件下引入组件样式

?
1
2
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */

?
1
2
@import "~ng-zorro-antd/style/entry.less"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/entry.less"; /* 引入组件样式 */

然后在所需要的组件中使用ng-zorro就可正常使用了。

总结

到此这篇关于关于angular引入ng-zorro的问题的文章就介绍到这了,更多相关angular引入ng-zorr问题内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://segmentfault.com/a/1190000023938261

延伸 · 阅读

精彩推荐