伏龙阁资源网

浅谈ng-zorro使用心得
站长资源 2024/11/27 佚名
2 0

前言

本周使用ng-zorro做了项目的原型，对它也有了一定的了解，总的来说不难，可以用强化版boostrap来理解它,由于黄庭祥初始化工作做得很好，在写的过程遇到的问题不是很麻烦，感谢祥哥。

问题一、button不起作用

问题描述：button按钮按下无响应，如下图：

代码如下：

浅谈ng-zorro使用心得

解决思路：

首先删除button中所有的样式，保留最基本的html，发现依然无响应，说明问题不在button身上

排查栅格布局，发现table标签被我放在了button同一行新建了一个row,col放置table，问题解决

浅谈ng-zorro使用心得

总结：看来ng-zorro的栅格要比bootstrp严格，不允许随便嵌套内容

问题二、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>缺少路由出口，将其添加，问题解决

浅谈ng-zorro使用心得

搜索栏button不对齐

问题描述：在使用官方文档的一个搜索框时，样式与官方文档不一致

官方的样式：

浅谈ng-zorro使用心得

复制过来以后的样式：

浅谈ng-zorro使用心得

可以看到button没有附着在input上

解决思路：

  • 打开检查，寻找该控件的css样式
  • 发现去除该处样式，button的位置恢复正常

浅谈ng-zorro使用心得

原因：该样式是我自己添加的，为了能让多个button间有空隙，但却覆盖了搜索框button的样式，最后去除该样式，用 来实现button间的空隙

问题四、 左侧导航栏无法向下滚动

问题描述：当左侧导航栏内容超出页面时，无法滚动下滑，如下图：

浅谈ng-zorro使用心得

解决思路：

  • 查看官方文档的示例代码，对比参考，看不出异常
  • 谷歌搜索"ng-zorro submenu overflowed"，结果太少
  • 将我们的导航栏的代码全部注释，换成官方的示例代码，发现问题依然存在，说明我们侧导航栏的样式写得有问题
  • 打开检查，排查css样式，发现是position fix惹的祸,将其去除后，导航可以滚动

浅谈ng-zorro使用心得

总结

本周写原型的工作并不复杂，主要是在看文档理解需求上遇到一些问题，经常返工重做，另外，感觉ng-zorro的官方文档写得不是很全，在写一些功能时经常需要猜，而且一旦改动样式就会出现一些不可预料的错误。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接