谈使用ng-zorro的体会

前言

本周，ng-zorro被用作项目的原型，不难理解。通过增强的助推器可以理解。因为黄庭祥已经做好了初始化，所以写的时候遇到的问题也不是很麻烦。感谢向兄。

问题一，按钮不起作用

问题描述：按下按钮没有响应，如下图所示：

代码如下：

解决方案：

首先删除button中的所有样式，保留最基本的html，发现还是没有反应，说明问题不在button

检查网格布局后，我发现表格标签被放置在同一行中，col按钮，并创建了一个新的行和col来放置表格。问题解决了

总结：似乎ng-zorro的网格比bootstrp严格，不允许随便嵌套内容

其次，路由器链接不起作用

问题描述：在按钮中使用routerLink无法进行页面跳转

代码如下

复制的代码如下：按钮NZ-button路由器链接='/main/grade/add ' I NZ-icon type=' plus '/I add/button

解决方案：

打开控制台，点击按钮，发现没有错误信息，将跳转模式改为A标签的herf，发现它可以跳转，说明url定义正确，询问黄庭祥，检查，发现我没有在父组件中写路由器-出口/路由器-出口，添加它，解决问题

搜索栏按钮未对齐

问题描述：使用公文搜索框时，样式与公文不一致

官方风格：

复制后的样式：

您可以看到按钮没有连接到输入

解决方案：

打开检查，查找控件的css样式，发现那里的样式被移除，按钮的位置恢复正常

原因：我自己加了这个样式，是为了让多个按钮之间有空隙，但是它覆盖了搜索框按钮的样式，最后去掉了样式实现了按钮之间的空隙

问题4。左侧导航栏不能向下滚动

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

解决方案：

看官方文档的样例代码，对比参考文献，看不出谷歌搜索‘ng-zorro子菜单溢出’的异常。结果太少了。我们导航栏的所有代码都被注释并替换为官方示例代码。发现问题依然存在，说明我们这边导航栏的样式有问题。打开检查，检查css样式，发现是定位错误。移除后，导航可以滚动

摘要

这一周的原型写作工作并不复杂，主要是看文档和理解要求上存在一些问题，经常会返工重做。此外，感觉ng-zorro的官方文档写得并不完全，在编写一些函数时往往需要猜测，一旦风格发生变化，就会出现一些意想不到的错误。

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