Angular版本的 Ant Design 總算發(fā)布了，其名曰：ng-zorro-antd。

這人要是越期待，心就越著急。早在8月上旬我就開發(fā)好了 ng-zorro-vscode；一個(gè)在vscode下的snippets。因此，雖然那時(shí)未能探到源代碼，但從官網(wǎng)的SDK中，就已經(jīng)對(duì) ng-zorro-antd 有一定全面性了解。

下面將基于我的理解，從宏觀角度解析一下，或許能幫助你更好的去使用 ng-zorro-antd。

再次說一下，ng-zorro-antd 真的是非常有良心的作品。

一、安裝

ng-zorro-antd 本身只是一個(gè)antd組件Angular實(shí)現(xiàn)的合集，因此，如果你希望基于 ng-zorro-antd 開發(fā)依然需要先安裝 Angular Cli。

1、創(chuàng)建項(xiàng)目

# 安裝全局，這樣允許直接在CMD命令行中使用 `ng` 命令。
npm install -g @angular/cli@latest

# 創(chuàng)建項(xiàng)目
ng new demo

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

2、導(dǎo)入模塊

我建議在 SharedModuel 中導(dǎo)入模塊。

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

3、根組件

務(wù)必要引入 nz-root 根組件；有且只需引用一次。部分組件需要依賴 nz-root 所以最佳位置放在根組件內(nèi)，比如 ./src/app.component.html：

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

至此，你可以放心在任何頁面中使用 ng-zorro-antd 組件。

二、最佳實(shí)踐

已經(jīng)實(shí)現(xiàn)了絕大多數(shù)的 React 版本的組件；雖然今天剛發(fā)布，但是已經(jīng)在阿里內(nèi)部已經(jīng)在使用了。

1、命名

ng-zorro-antd 在命名方面還是很講究的，而且有幾個(gè)特點(diǎn)：

• 所有組件、指令都是以 nz- 開頭（例：ng-button）。
• 所有組件、指令屬性都是 nz 開頭，緊跟大駝峰式命名法（例：[nzSize]）。

2、柵格

antd 是以 24 等分的柵格來劃分區(qū)域，這一點(diǎn)可能跟經(jīng)常使用 bootstrap 的人會(huì)有一點(diǎn)不習(xí)慣。

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

一個(gè) nz-row 內(nèi)的 nz-col 總格數(shù)（[nzSpan] 總和）為24表示一行，如果超過會(huì)自動(dòng)換行。

當(dāng)然，也支持類似 bootstrap 的響應(yīng)式設(shè)計(jì)，內(nèi)置了幾種不同的響應(yīng)。

如果你喜歡 flex 布局，需要手動(dòng)開啟：

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

3、樣式

無須再額外的引用外部任何 antd 的樣式，因?yàn)?ng-zorro-antd 是以 encapsulation: ViewEncapsulation.None 不隔離的方式封裝樣式，可以直接在任何地方運(yùn)用到這些樣式。

比如：

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

4、時(shí)間處理

Angular 默認(rèn)的時(shí)間處理簡直就是一個(gè)痛，而 ng-zorro-antd 依賴了 moment，因此在處理時(shí)間格式上，正確的姿勢應(yīng)該是：

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

5、貨幣

也是Angular痛點(diǎn)，ng-zorro-antd 并無提供相應(yīng)Pipe，應(yīng)該后續(xù)會(huì)有！

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

如果你在 vscode 中編寫Angular，那么安裝 ng-zorro-vscode 代碼片斷，對(duì)開發(fā)效率很有幫助。

四、結(jié)論

ng-zorro-antd 對(duì)Angular應(yīng)該會(huì)有一個(gè)非常大的推動(dòng)。

當(dāng)前組件與React組件還有幾個(gè)比較重要的組件未完成，比如：autocomplate、Cascader 一些很常用的組件。希望有更多大牛加入貢獻(xiàn)行列，讓 ng-zorro-antd 社區(qū)環(huán)境更豐富。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論