本文主要介绍使用ng-zorro的经验。边肖认为这很好。现在分享给大家，给大家一个参考。来和边肖一起看看吧。

前言

这周用ng-zorro做了项目的原型，对它有了一定的了解。总的来说，不难。可以用boostrap的增强版来了解一下。因为黄庭祥做好了初始化，所以编写过程中遇到的问题并不是很麻烦。谢谢葛翔。

问题一、button不起作用

描述：按下按钮时没有反应，如下图所示：

代码如下：

解决方案：

第一，删除按钮中的所有样式，保留最基本的html，发现还是没有响应，说明问题不在按钮。

在检查了网格布局之后，我发现表格标签被放在了同一行col button中，并且创建了一个新行。COL放了桌子，问题就解决了。

总结：ng-zorro的网格好像比bootstrp的更严格，不允许随便嵌套内容。

问题二、routerLink不起作用

描述：你不能使用按钮中的routerLink进行页面跳转。

代码如下所示

复制代码如下：button NZ-button router link=/main/grade/add I NZ-icon type= plus /I add/button

解决方案：

打开控制台，点击按钮，没有发现错误信息。

把跳转模式改成一个标签的herf，发现可以跳转，说明url定义是正确的。

问黄庭祥，查了一下，发现我没有在父组件里写router-outlet/router-outlet，路由出口也是缺失的。补充一下，解决问题。

搜索栏button不对齐

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

官方风格：

来了之后复制风格：

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

解决方案：

检查以查找控件的css样式。

移除样式后，按钮的位置将恢复正常。

原因：这个样式是我自己加的，为了让多个按钮之间有空隙，但是盖住了搜索框按钮的样式。最后，我移除了这个样式来实现按钮之间的间隙。

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

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

解决方案：

看看公文的样本代码，对比一下引用，看不出什么异常。

谷歌搜索‘ng-zorro子菜单溢出’结果太少。

注释我们导航栏的所有代码，用官方的样本代码替换。发现问题依然存在，说明我们的侧边导航栏风格有问题。

检查css样式并进行故障排除，发现错误是位置固定。移除后，可以滚动导航。

总结

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

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