浅谈ng-zorro使用心得


Posted in Javascript onDecember 03, 2018

前言

本周使用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的官方文档写得不是很全,在写一些功能时经常需要猜,而且一旦改动样式就会出现一些不可预料的错误。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
javascript实现放大镜功能
Dec 09 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
JS跨域请求的问题解析
Dec 03 #Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 #Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 #Javascript
小程序实现授权登陆的解决方案
Dec 02 #Javascript
mpvue 单文件页面配置详解
Dec 02 #Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 #Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 #Javascript
You might like
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
了解重排与重绘
2019/05/29 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python3实现弹弹球小游戏
2019/11/25 Python
python序列类型种类详解
2020/02/26 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
物流合作计划书
2014/01/10 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
董事长助理工作职责
2014/06/08 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
python实现双向链表原理
2022/05/25 Python