今天开始学习NG-ZORRO这个UI框架，过程中遇到了许多问题，这里把一些问题记录下来，方便后续查阅。NG-ZORRO由阿里大神们开源，给angular开发者提供了极大的便利。
改变icon图标的大小
我试图通过改变width属性来改变图标的大小，通过background来改变颜色，最后才发现通过::before伪元素构造的图标其实是文字内容，因而其大小需要通过font-size来控制，而颜色则是由color来控制。知道真相的我眼泪掉下来。
1 | font-size: 24px; |
使用nz-button时，prod环境打包报错
1 | <button nz-button [nzType]="primary"> |
在login组件中使用nz-button后，打包脚本执行到build:prod时报错，报错信息如下：
1 | ERROR in ng:///G:/projects/angular/my-app/src/app/login/login.component.html (9,3): Property 'primary' does not exist on type 'LoginComponent' |
经过分析发现，可能是primary被当成这个组件的属性处理了，而我没有在组件中定义这个属性，所以报错，于是把它改成字符串试试。
1 | <button nz-button [nzType]="'primary'"> |
打包时间接近8分钟
使用了nz-zorro后，打包竟然长达8分钟，而打包后的包的大小与之前一致。我相信这不是ng-zorro的问题，可能是我的webpack配置出现了问题。我之前使用的angular版本是4.2的，安装ng-zorro后报了个警告，于是我升级angular/core等版本到4.4，不知道是不是这些问题引起的，具体原因还没找到。这里先挖个坑。
1 | // 这一步等待时间超长，接近8分钟 |
扫一扫下方小程序码或搜索Tusi博客，即刻阅读最新文章！
