前言

本周使用ng-zorro做了項(xiàng)目的原型，對(duì)它也有了一定的了解，總的來說不難，可以用強(qiáng)化版boostrap來理解它,由于黃庭祥初始化工作做得很好，在寫的過程遇到的問題不是很麻煩，感謝祥哥。

問題一、button不起作用

問題描述：button按鈕按下無響應(yīng)，如下圖：

代碼如下：

解決思路：

首先刪除button中所有的樣式，保留最基本的html，發(fā)現(xiàn)依然無響應(yīng)，說明問題不在button身上

排查柵格布局，發(fā)現(xiàn)table標(biāo)簽被我放在了button同一行新建了一個(gè)row,col放置table，問題解決

總結(jié)：看來ng-zorro的柵格要比bootstrp嚴(yán)格，不允許隨便嵌套內(nèi)容

問題二、routerLink不起作用

問題描述：在button中使用routerLink無法進(jìn)行頁面跳轉(zhuǎn)

代碼如下

解決思路：

• 打開控制臺(tái)，點(diǎn)擊button，發(fā)現(xiàn)無報(bào)錯(cuò)信息
• 將跳轉(zhuǎn)方式改成a標(biāo)簽的herf，發(fā)現(xiàn)可以跳轉(zhuǎn)，說明url定義無誤
• 詢問黃庭祥，檢查，發(fā)現(xiàn)我沒有在父組件中寫<router-outlet></router-outlet>缺少路由出口，將其添加，問題解決

搜索欄button不對(duì)齊

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

官方的樣式：

復(fù)制過來以后的樣式：

可以看到button沒有附著在input上

解決思路：

• 打開檢查，尋找該控件的css樣式
• 發(fā)現(xiàn)去除該處樣式，button的位置恢復(fù)正常

原因：該樣式是我自己添加的，為了能讓多個(gè)button間有空隙，但卻覆蓋了搜索框button的樣式，最后去除該樣式，用 來實(shí)現(xiàn)button間的空隙

問題四、 左側(cè)導(dǎo)航欄無法向下滾動(dòng)

問題描述：當(dāng)左側(cè)導(dǎo)航欄內(nèi)容超出頁面時(shí)，無法滾動(dòng)下滑，如下圖：

解決思路：

• 查看官方文檔的示例代碼，對(duì)比參考，看不出異常
• 谷歌搜索"ng-zorro submenu overflowed"，結(jié)果太少
• 將我們的導(dǎo)航欄的代碼全部注釋，換成官方的示例代碼，發(fā)現(xiàn)問題依然存在，說明我們側(cè)導(dǎo)航欄的樣式寫得有問題
• 打開檢查，排查css樣式，發(fā)現(xiàn)是position fix惹的禍,將其去除后，導(dǎo)航可以滾動(dòng)

總結(jié)

本周寫原型的工作并不復(fù)雜，主要是在看文檔理解需求上遇到一些問題，經(jīng)常返工重做，另外，感覺ng-zorro的官方文檔寫得不是很全，在寫一些功能時(shí)經(jīng)常需要猜，而且一旦改動(dòng)樣式就會(huì)出現(xiàn)一些不可預(yù)料的錯(cuò)誤。

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

最新評(píng)論