浅谈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 相关文章推荐
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
JS清除选择内容的方法
Jan 29 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
vue实现图片预览组件封装与使用
Jul 13 Javascript
JS回调函数深入理解
Oct 16 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
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
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
Python交互环境下实现输入代码
2018/06/22 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python判断自身是否正在运行的方法
2019/08/08 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
Python生成器generator原理及用法解析
2020/07/20 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
成人教育自我鉴定
2013/11/01 职场文书
开学典礼感言
2014/02/16 职场文书
村级个人对照检查材料
2014/08/22 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
新闻稿格式范文
2015/07/18 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA