浅谈ng-zorro使用心得

开篇语

近期使用ng-zorro进行项目开发，颇有心得，想与大家分享。长沙网络推广让我发现了这个宝藏框架，现在让我来带大家一同，看看它的魅力所在。

问题与解决

问题一：按钮失灵

遇到按钮按下无响应的情况，真的让人头疼。经过一番排查，发现删除按钮中的所有样式后，问题依旧存在。后来发现是栅格布局的问题，将table标签放在了button同一行，新建了一个row和col来放置table后，问题迎刃而解。看来ng-zorro的栅格布局比Bootstrap更为严格，对嵌套内容的限制更加明确。

问题二：路由链接失效

在使用button中的routerLink进行页面跳转时，遇到了无法跳转的问题。通过控制台查看无报错信息，尝试将跳转方式改为a标签的href，发现可以跳转，说明url定义无误。询问同事后，发现缺少路由出口，于是在父组件中添加，问题得以解决。

问题三：搜索栏按钮错位

在使用官方文档的搜索框时，发现样式与官方不一致，特别是button没有附着在input上。通过检查发现，是我添加的样式覆盖了搜索框button的样式。去除该样式后，用其他方式实现button间的空隙，成功解决了按钮错位的问题。

问题四：左侧导航栏无法滚动

当左侧导航栏内容超出页面时，无法滚动下滑。对比官方文档的代码后没有发现异常，通过搜索也未能找到解决方案。最终通过注释我们的导航栏代码，换成官方的示例代码后发现问题依然存在，于是排查css样式，发现是position fix导致的。去除后，导航可以滚动。

本周使用ng-zorro写原型的工作虽然并不复杂，但在理解需求和查看文档的过程中遇到了一些挑战。ng-zorro的官方文档写得相对简洁，有时需要我们去猜测和尝试。改动样式时容易出现不可预见的错误。希望通过这次的分享，能对大家的学习有所帮助。同时感谢长沙网络推广的推荐，也希望大家多多支持狼蚁SEO。如果有任何疑问或建议，欢迎一起交流！让我们共同学习进步！