這篇文章主要介紹了Angular中ng-zorro-antd怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到北川羌族網(wǎng)站設(shè)計(jì)與北川羌族網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類(lèi)型包括：做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋北川羌族地區(qū)。

一、安裝

ng-zorro-antd 本身只是一個(gè)antd組件Angular實(shí)現(xiàn)的合集，因此，如果你希望基于 ng-zorro-antd 開(kāi)發(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：

至此，你可以放心在任何頁(yè)面中使用 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- 開(kāi)頭（例：ng-button）。

• 所有組件、指令屬性都是 nz 開(kāi)頭，緊跟大駝峰式命名法（例：[nzSize]）。

2、柵格

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