ng-zorro-antd入门

蚂蚁设计的棱角版终于发布了，名字叫ng-zorro-antd。

这个人期望的越多，他的内心就会越焦虑。早在8月初，我就开发了ng-zorro-vs code；vscode下的代码片段。所以虽然当时找不到源代码，但是从官网的SDK中我们对ng-zorro-antd有了全面的了解。

基于我的理解，我会从宏观的角度来分析，这可能会帮助你更好地使用ng-zorro-antd。

还是那句话，ng-zorro-antd真的是一部非常尽职尽责的作品。

一、安装

Ng-zorro-antd本身只是antd组件的Angular实现的集合，所以如果想基于ng-zorro-antd进行开发，还是需要先安装Angular Cli。

1.创建项目

# global已安装，允许直接从CMD命令行使用` ng '命令。npminstall-g @ angular/[电子邮件保护] #创建项目ng新演示#安装包npminstall-save ng-zorro-antd2，导入模块

我建议在SharedModuel中导入模块。

@ ng module({ import s :[ngzorroantdmmodule . forroot()]，export s 3360[ngzorroantdmmodule]})；3.根组件

一定要引入nz-root根成分；是的，只需要引用一次。有些组件需要依赖nz-root，所以最好的位置是在根组件中，比如。/src/app.component.html:

NZ-root路由器-插座/路由器-插座/NZ-root，可以在任何页面安全使用ng-zorro-antd组件。

第二，最佳实践

React版本的大部分组件已经实现；虽然今天刚发布，但已经在阿里使用了。

1.命名

Ng-zorro-antd非常注重命名，并且有几个特点：

所有组件和命令都以nz-(例如：ng-button)开头。所有组件和指令属性都以nz开头，后跟大驼峰命名法(例如：[nzSize])。2.格子

Antd用24个相等的网格划分区域，对于经常使用bootstrap的人来说可能有点不习惯。

div nz-row div nz-col[nzSpan]=' 12 '/div NZ-col[nzSpan]=' 12 '/div/div一个NZ-row中的NZ-col单元格总数(nzSpan的和)为24，表示一行。如果超过，它将自动换行。

当然，它也支持像bootstrap这样的响应设计，内置了几种不同的响应。

大小ng-zorro-antd引导自动[nzxs]。col-xs-540px [nzsm]。col-sm-720px [nzmd]。col-MD-960px [nzlg]。col-LG-1140px [nzxl]。col-XL-如果您

div NZ-row[NZ type]=“flex”[NZ align]=“center”[NZ align]=“top”div NZ-col[NZ span]=“12”/div NZ-col[NZ span]=“12”/div/div 3

不需要引用任何外部的antd样式，因为ng-zorro-antd以封装： view encapsulation.none的方式封装样式，可以在任何地方直接应用到这些样式。

例如：

div class=' ant-row ' div class=' ant-col-12 ' col-12/div class=' ant-col-12 ' col-12/div/div 4，时间处理

Angular的默认时间处理简直是一种痛苦，而ng-zorro-antd则依赖于力矩，因此处理时间格式中的正确姿势应该是：

_ value | nzdate : ' yyyy-mm-dddddd ' output : 2017年8月15日星期二5。货币。

这也是Angular的痛点。ng-zorro-antd没有提供对应的Pipe，应该跟进！

第三，如果工人想擅长他们的事情，他们必须首先磨利他们的工具

如果用vscode写Angular，安装ng-zorro-vscode代码片段对开发效率很有帮助。

四.结论

Ng-zorro-antd应该会给Angular带来很大的推动力。

目前组件和React组件之间还有几个重要的组件没有完成，比如常用的autocomplate和Cascader组件。希望更多的大牛加入贡献，让ng-zorro-antd社区的环境更加丰富。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。