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!