有了ng-zorro-mobile，ionic如虎添翼

前端一般会听过阿里的Ant Design，而对于angular使用者，大多也听过ng-zorro（Ant Design for Angular的PC版），最近一次ng-zorro的更新，带来了新的开源迷弟：ng-zorro-mobile（Ant Design Mobile for Angular）。

打开ng-zorro-mobile官网，侧边栏很醒目地标示了【在ionic中使用】：

ionic使用

众所周知，ionic自身也是一个UI框架，涵盖绝大多数常用组件，但有些组件没有或不好用，就要借助第三方组件，现在有了ng-zorro-mobile，对ionic有了极大的补充。

在ionic中使用ng-zorro-mobile非常简单，先是创建项目，有ionic相关经验对下面几行代码非常熟悉：

#全局安装ionic-cli
npm install -g ionic
#使用ionic-cli创建项目
ionic start PROJECT-NAME --type=angular

注意：要有--type=angular后缀，才是创建ionic4项目，不然是创建ionic3项目，ng-zorro-mobile是支持ionic4，而暂不兼容ionic3的，所以官方文档写错了。

然后接入ng-zorro-antd-mobile，其中有两种方式：

1. 使用angular-cli，只需要以下一句命令即可完成模块初始化配置（前提安装了angular-cli）：

ng add ng-zorro-antd-mobile

但这方式有个坑，它自动把app.component.html的内容强制替换为ng-zorro-antd-mobile的示例内容，所以执行完命令后要把app.component.html还原。

2. 使用npm，则先安装模块，然后在 app.modules.ts 中，全局引入 ng-zorro-antd-mobile：

npm install ng-zorro-antd-mobile --save

import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';
imports: [
    ...
    NgZorroAntdMobileModule
  ]

让我们看下ng-zorro-antd-mobile带来了哪些有用的组件，随便截几个图：

notice

step

picker

imagePicker

calendar

modal

actionSheet

好了，不一一截图了，有兴趣自行上官网上看吧。