Angular中ng-zorro-antd怎么用
这篇文章主要介绍了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 的人会有一点不习惯。
一个 nz-row 内的 nz-col 总格数（[nzSpan] 总和）为24表示一行，如果超过会自动换行。
当然，也支持类似 bootstrap 的响应式设计，内置了几种不同的响应。
| Size | ng-zorro-antd | bootstrap |
|---|---|---|
| auto | [nzXs] | .col-xs- |
| 540px | [nzSm] | .col-sm- |
| 720px | [nzMd] | .col-md- |
| 960px | [nzLg] | .col-lg- |
| 1140px | [nzXl] | .col-xl- |
如果你喜欢 flex 布局，需要手动开启：
3、样式
无须再额外的引用外部任何 antd 的样式，因为 ng-zorro-antd 是以 encapsulation: ViewEncapsulation.None 不隔离的方式封装样式，可以直接在任何地方运用到这些样式。
比如：
col-12col-12
4、时间处理
Angular 默认的时间处理简直就是一个痛，而 ng-zorro-antd 依赖了 moment，因此在处理时间格式上，正确的姿势应该是：
_value | nzDate: 'YYYY-MM-DD ddd'Outpu: 2017-08-15 周二
5、货币
也是Angular痛点，ng-zorro-antd 并无提供相应Pipe，应该后续会有！
三、工欲善其事，必先利其器
如果你在 vscode 中编写Angular，那么安装 ng-zorro-vscode 代码片断，对开发效率很有帮助。
感谢你能够认真阅读完这篇文章，希望小编分享的"Angular中ng-zorro-antd怎么用"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!
