NG-ZORRO 0.7.0正式版本發布

來自專欄 NG-ZORRO

官網地址：Ant Design Of Angular

GIT地址：NG-ZORRO/ng-zorro-antd

寫給 0.6.x 版本用戶#

我應該升級到最新版本的 ng-zorro-antd 嗎？#

0.7.0 版本的 ng-zorro-antd 在以下幾個方面做出了很大改進

• 更少的代碼：簡化了很多組件的使用方式，例如 form 表單同樣功能下代碼量會縮減1/3
• 更強的功能：完善了很多組件的功能，無論是 input 還是 date-picker 等大量組件都有了更強大的功能可用
• 更好的質量：增加了組件的單元測試，為了保證組件的質量我們目前為止增加了 1070 個測試用例，單測覆蓋率達到了 95% 以上
• 更新的規範：升級到 Ant Design 3.0 規範，並且支持像 react 版本一樣自定義主題

升級到 0.7.0 版本是最好的選擇。

為什麼會有這麼多 break change#

就像上文所說的那樣，為了能夠提供更好的使用方式，我們對大量代碼進行了簡化，並對很多功能做了增強，在這個過程中不可避免的會引入破壞性更新，希望大家能夠理解。

應該如何升級到最新版本#

為了幫助用戶從低版本升級，我們保留了低版本的文檔系統，你可以隨時對比文檔中的差別，另外 ng-alain 也提供了從 0.6.x 版本升級到 0.7.0 的在線模板工具，大家可以根據需要使用。

請注意： 由於 @angular/cli 的最新版本已經默認採用 angular 6.0 以上的版本，請使用 @angular/cli 1.7.4 及以下版本。

寫給 0.7.0 試用用戶#

感謝在測試階段升級到 0.7.0 beta 版本的所有用戶，沒有你們的協助就不會有 0.7.0 正式版本的誕生，推薦所有 0.7.0 beta 版本用戶升級到該版本。

如何從 0.7.0 測試版本遷移到正式版#

從 0.7.0 測試版本到 0.7.0 正式版本基本沒有破壞性更新，更多的工作是在開發新的組件上，因此可以放心遷移。

npm install ng-zorro-antd@0.7.0

命令即可升級至 0.7.0 正式版本

什麼時候官方會支持 Angular 6.0 版本#

目前 ng-zorro-antd 已經全力在適配 Angular 6.0 版本，可以在這裡 追蹤我們的進度。 我們會在 1.0 版本提供經過測試的 Angular 6.0適配版本，屆時我們還會同時支持 @angular/cli 最新版本的眾多特性，rxjs 與 cdk 的依賴版本也會同步升級到 6.0 版本，提供更好更多的性能。

如何在 0.7.0 版本下使用 Angular 6.0#

如果你希望在當前版本(0.7.0) 使用 Angular 6.0，你需要完成以下兩部分工作

• 安裝 rxjs-compat 用於兼容 rxjs 5.x
• 降級到 less 2.7 版本，因為最新版本的 @angular/cli 依賴的 less 3.0 版本禁用了 javascriptEnabled 選項，相關工作可以在這裡追蹤

最後，由於目前官方未對 Angular 6.0 版本進行全面的測試和兼容工作，並不建議用戶在生產環境使用 Angular 6.0 版本。

從 0.7.0 到 1.0.0 還會有破壞性更新嗎？#

除了Angular 和 RxJS 升級帶來的更新之外，ng-zorro-antd 不會再引入破壞性更新，可以安心使用當前版本。

0.7.0#

2018.05.15

0.7.0 作為 1.0 正式版 之前的最後一系列版本，涉及到了底層的大量重構與改動，API 將與 1.0 正式版本的內容保持一致，請大家放心升級

主要變化#

• 同步Ant Design 3.0 的設計
• 支持定製主題
• 支持英文文檔
• 支持34種語言類型
• 已有組件的功能與Ant Design React同步
• 大量組件的性能優化與重構
• 單元測試率提高到95以上%
• 新的 Tree 組件
• 新的 DatePicker 組件
• 新的 TimePicker 組件
• 新的 Mention 組件
• 新的 AutoComplete 組件
• 新的 Divider 組件
• 新的 List 組件

升級內容#

全局部分#

• 需要手動引入樣式文件，支持自定義主題
• 不再依賴 moment，新增加 date-fns 依賴
• forRoot 方法不再接受字體配置，本地字體部署需要在定製主題中實現

Button#

• nz-button 內部不再需要加入<span>標籤

Icon#

• 新增部分iconfont
• 本地字體部署需要在定製主題中實現

Grid#

• 柵格斷點增加xxl
• 柵格間隔支持根據不同屏幕寬度變化

Layout#

• 支持 翻轉摺疊提示箭頭的方向
• 支持 自定義Trigger為模板變數

Affix#

• 增加距離底部固釘
• 增加目標佔位符、更好的滾動性能

Breadcrumb#

• 自定義分隔符 支持傳入模板

Dropdown#

• 增加邊界檢測
• 增加右鍵菜單支持

Menu#

• 支持菜單是否可選中功能
• 增加子菜單選中事件
• 支持二級菜單禁用
• 增加自動邊界檢測

Pagination#

• 支持自定義渲染頁碼結構
• 支持只有一頁時是否隱藏分頁器

Steps#

• 支持傳入模板可以自定義點狀步驟條渲染內容
• 自定義圖標 支持傳入 樣式名稱和模板兩種方式，原有方式廢棄
• 自定義標題 支持傳入模板和字元串

Checkbox#

• label 內部不再需要寫入 span 標籤
• 新增靈活布局的使用方式

Form#

• 廢棄原有 Directive 的使用方式，大幅度簡化使用方式

Input#

• 暴露原生 input 標籤，大幅度簡化使用方式

InputNumber#

• 重寫了內部邏輯，與React版本邏輯保持一致
• 支持更多快捷鍵操作

Radio#

• 內部不再需要寫入 span 標籤
• 支持nzName及更多快捷鍵操作

Rate#

— 支持自定義字元

• 支持清除模式

Select#

• 支持 option 分組功能
• 支持 compareWith 方法
• 支持 nzDropdownClassName、nzDropdownMatchSelectWidth、nzDropdownStyle等對樣式定義的方法
• option 自定義內容方式改變
• 增加 nzFilterOption、nzServerSearch 等搜索定義API

Switch#

• 自定義內容方式改變，nzCheckedChildren 與 nzUnCheckedChildren 支持傳入 模板和字元串
• 支持loading效果

Card#

• 重寫使用方式，大幅度降低使用成本

Carousel#

• 支持動態調整所有屬性，重寫內部邏輯

Collapse#

• selector名稱改變
• 面板頭部內容支持模板和字元串變數
• 增加是否展示箭頭的方法
• 增加展開回調函數

Table#

• 重寫內部邏輯，大幅度簡化使用方式
• 支持React版本的全部功能

Tabs#

• nzTitle 的傳入方式改變，支持傳入模板和字元串
• nzTabBarExtraContent 的傳入方式改變
• 增加 nzTabBarGutter、nzOnNextClick、nzOnPrevClick、nzHideAll等多種方法

Tags#

• 重寫使用方式，增加 nzMode 選項

Timeline#

• 幽靈節點的定義支持 模板 字元串和布爾類型
• 支持自定義自定義時間軸點

Alert#

• 自定義圖標類型、自定義關閉按鈕、警告提示的輔助性文字介紹、 警告提示內容 全部支持傳入模板

Modal#

• 重構，同一套代碼，以模版方式支持普通模態框和確認框
• 支持AntDesign的所有參數用法（部分參數有調整）
• 額外支持設置確認/取消按鈕的loading狀態
• 增強footer的自定義：支持配置方式設置按鈕組
• 更加便捷的方式進行內外組件與對話框的相互通信和調用

Progress#

• 重寫，支持React的全部功能

Spin#

• 支持自定義 載入指示符

Anchor#

• 增加 nzAffix、nzShowInkInFixed、nzScroll 等屬性

Divider#

• 新組件：區隔內容的分割線

List#

• 新組件：通用列表

TimePicker#

• 新增 TimePicker 組件

Mention#

• 新增 Mention 組件

推薦閱讀：