ng-zorro使用过程中的一些笔记

ng-zorro使用过程中的一些笔记

今天开始学习NG-ZORRO这个UI框架,过程中遇到了许多问题,这里把一些问题记录下来,方便后续查阅。NG-ZORRO由阿里大神们开源,给angular开发者提供了极大的便利。

改变icon图标的大小

我试图通过改变width属性来改变图标的大小,通过background来改变颜色,最后才发现通过::before伪元素构造的图标其实是文字内容,因而其大小需要通过font-size来控制,而颜色则是由color来控制。知道真相的我眼泪掉下来。

1
2
font-size: 24px;
color: rgba(245, 245, 245, 0.6);

使用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
2
// 这一步等待时间超长,接近8分钟
91% additional asset processing

扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

Tusi博客

You forgot to set the qrcode for Alipay. Please set it in _config.yml.
You forgot to set the qrcode for Wechat. Please set it in _config.yml.
You forgot to set the business and currency_code for Paypal. Please set it in _config.yml.
You forgot to set the url Patreon. Please set it in _config.yml.
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×