浅谈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 相关文章推荐
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
js Array.slice的8种不同用法示例
Jul 10 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP Include文件实例讲解
2019/02/15 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
Javascript的比较汇总
2016/07/25 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
Python类定义和类继承详解
2015/05/08 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Python多项式回归的实现方法
2019/03/11 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
python集合能干吗
2020/07/19 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
幼师求职自荐信
2014/05/31 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers