ng-zorro-antd 初体验

Angular版本的 Ant Design 总算发布了，其名曰：ng-zorro-antd。

这人要是越期待，心就越着急。早在8月上旬我就开发好了 ng-zorro-vscode；一个在vscode下的snippets。所以，虽然那时未能探到源代码，但从官网的SDK中，就已经对 ng-zorro-antd 有必定全面性了解。

下面将基于个人理解，从宏观角度解析一下，或许能帮助你更好的去使用 ng-zorro-antd。

再次说一下，ng-zorro-antd 真的是很是有良心的做品。

1、安装

ng-zorro-antd 自己只是一个antd组件Angular实现的合集，所以，若是你但愿基于 ng-zorro-antd 开发依然须要先安装 Angular Cli。

一、建立项目

# 安装全局，这样容许直接在CMD命令行中使用 `ng` 命令。
npm install -g @angular/cli@latest

# 建立项目
ng new demo

# 安装包
npm install --save ng-zorro-antd

二、导入模块

我建议在 SharedModuel 中导入模块。

@NgModule({
    imports: [
        NgZorroAntdModule.forRoot()
    ],
    exports: [
        NgZorroAntdModule
    ]
});

三、根组件

务必要引入 nz-root 根组件；有且只需引用一次。部分组件须要依赖 nz-root 因此最佳位置放在根组件内，好比 ./src/app.component.html：

<nz-root>
    <router-outlet></router-outlet>
</nz-root>

至此，你能够放心在任何页面中使用 ng-zorro-antd 组件。

2、最佳实践

已经实现了绝大多数的 React 版本的组件；虽然今天刚发布，可是已经在阿里内部已经在使用了。

一、命名

ng-zorro-antd 在命名方面仍是很讲究的，并且有几个特色：

• 全部组件、指令都是以 nz- 开头（例：ng-button）。
• 全部组件、指令属性都是 nz 开头，紧跟大驼峰式命名法（例：[nzSize]）。

二、栅格

antd 是以 24 等分的栅格来划分区域，这一点可能跟常用 bootstrap 的人会有一点不习惯。

<div nz-row>
    <div nz-col [nzSpan]="12"></div>
    <div nz-col [nzSpan]="12"></div>
</div>

一个 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 布局，须要手动开启：

<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'top'">
    <div nz-col [nzSpan]="12"></div>
    <div nz-col [nzSpan]="12"></div>
</div>

三、样式

无须再额外的引用外部任何 antd 的样式，由于 ng-zorro-antd 是以 encapsulation: ViewEncapsulation.None 不隔离的方式封装样式，能够直接在任何地方运用到这些样式。

好比：

<div class="ant-row">
    <div class="ant-col-12">col-12</div>
    <div class="ant-col-12">col-12</div>
</div>

四、时间处理

Angular 默认的时间处理简直就是一个痛，而 ng-zorro-antd 依赖了 moment，所以在处理时间格式上，正确的姿式应该是：

_value | nzDate: 'YYYY-MM-DD ddd'
Outpu: 2017-08-15 周二

五、货币

也是Angular痛点，ng-zorro-antd 并没有提供相应Pipe，应该后续会有！

3、工欲善其事，必先利其器

若是你在 vscode 中编写Angular，那么安装 ng-zorro-vscode 代码片段，对开发效率颇有帮助。

4、结论

ng-zorro-antd 对Angular应该会有一个很是大的推进。

当前组件与React组件还有几个比较重要的组件未完成，好比：autocomplate、Cascader 一些很经常使用的组件。但愿有更多大牛加入贡献行列，让 ng-zorro-antd 社区环境更丰富。

Happy Coding!