ng-zorro使用心得

前言

本週使用ng-zorro作了項目的原型，對它也有了必定的瞭解，總的來講不難，能夠用強化版boostrap來理解它,因爲黃庭祥初始化工做作得很好，在寫的過程遇到的問題不是很麻煩，感謝祥哥。

---

問題1、button不起做用

問題描述：button按鈕按下無響應，以下圖：
圖片描述
代碼以下：

解決思路：

• 首先刪除button中全部的樣式，保留最基本的html，發現依然無響應，說明問題不在button身上
• 排查柵格佈局，發現table標籤被我放在了button同一行
• 新建了一個row,col放置table，問題解決

總結：看來ng-zorro的柵格要比bootstrp嚴格，不容許隨便嵌套內容

問題2、routerLink不起做用

問題描述：在button中使用routerLink沒法進行頁面跳轉
代碼以下

<button nz-button routerLink="/main/grade/add"><i nz-icon type="plus"></i>增長</button>

解決思路：

• 打開控制檯，點擊button，發現無報錯信息
• 將跳轉方式改爲a標籤的herf，發現能夠跳轉，說明url定義無誤
• 詢問黃庭祥，檢查，發現我沒有在父組件中寫<router-outlet></router-outlet>缺乏路由出口，將其添加，問題解決

搜索欄button不對齊

問題描述：在使用官方文檔的一個搜索框時，樣式與官方文檔不一致
官方的樣式：

複製過來之後的樣式：

能夠看到button沒有附着在input上
解決思路：

• 打開檢查，尋找該控件的css樣式
• 發現去除該處樣式，button的位置恢復正常

緣由：該樣式是我本身添加的，爲了能讓多個button間有空隙，但卻覆蓋了搜索框button的樣式，最後去除該樣式，用 來實現button間的空隙

問題4、 左側導航欄沒法向下滾動

問題描述：當左側導航欄內容超出頁面時，沒法滾動下滑，以下圖：

解決思路：

• 查看官方文檔的示例代碼，對比參考，看不出異常
• 谷歌搜索"ng-zorro submenu overflowed"，結果太少
• 將咱們的導航欄的代碼所有註釋，換成官方的示例代碼，發現問題依然存在，說明咱們側導航欄的樣式寫得有問題
• 打開檢查，排查css樣式，發現是position fix惹的禍,將其去除後，導航能夠滾動

總結

本週寫原型的工做並不複雜，主要是在看文檔理解需求上遇到一些問題，常常返工重作，另外，感受ng-zorro的官方文檔寫得不是很全，在寫一些功能時常常須要猜，並且一旦改動樣式就會出現一些不可預料的錯誤。