扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了Angular中ng-zorro-antd怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联建站专注于马关网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供马关营销型网站建设，马关网站制作、马关网页设计、马关网站官网定制、重庆小程序开发服务，打造马关网络公司原创品牌,更为您提供马关网站排名全网营销落地服务。
一、安装
ng-zorro-antd 本身只是一个antd组件Angular实现的合集，因此，如果你希望基于 ng-zorro-antd 开发依然需要先安装 Angular Cli。
1、创建项目
# 安装全局，这样允许直接在CMD命令行中使用 `ng` 命令。 npm install -g @angular/cli@latest # 创建项目 ng new demo # 安装包 npm install --save ng-zorro-antd
2、导入模块
我建议在 SharedModuel 中导入模块。
@NgModule({
imports: [
NgZorroAntdModule.forRoot()
],
exports: [
NgZorroAntdModule
]
});3、根组件
务必要引入 nz-root 根组件；有且只需引用一次。部分组件需要依赖 nz-root 所以最佳位置放在根组件内，比如 ./src/app.component.html：
至此，你可以放心在任何页面中使用 ng-zorro-antd 组件。
二、最佳实践
已经实现了绝大多数的 React 版本的组件；虽然今天刚发布，但是已经在阿里内部已经在使用了。
1、命名
ng-zorro-antd 在命名方面还是很讲究的，而且有几个特点：
所有组件、指令都是以 nz- 开头（例：ng-button）。
所有组件、指令属性都是 nz 开头，紧跟大驼峰式命名法（例：[nzSize]）。
2、栅格
antd 是以 24 等分的栅格来划分区域，这一点可能跟经常使用 bootstrap 的人会有一点不习惯。