前言

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

問(wèn)題一、button不起作用

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

代碼如下：

解決思路：

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

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

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

問(wèn)題二、routerLink不起作用

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

代碼如下

解決思路：

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

搜索欄button不對(duì)齊

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

官方的樣式：

復(fù)制過(guò)來(lái)以后的樣式：

可以看到button沒(méi)有附著在input上

解決思路：

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

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

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

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

解決思路：

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

總結(jié)

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

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

最新評(píng)論