ng-zorro-mobile，踩坑记
- 兼容ionic4，但暂不兼容ionic3
ionic3和ionic4差别是比较大的，所以ionic3二次封装的组件基本是不能直接用在ionic4上。ng-zorro-mobile并不是依赖ionic的组件封装，而是基于angular6封装，所以理论上是兼容ionic3/4的，只是ionic3当前稳定版最高兼容到angular5，要使用ng-zorro-mobile要自行调整代码。而ionic4是兼容angular6的，所以可无缝使用ng-zorro-mobile。
- 原有项目使用
ng add ng-zorro-mobile会被强制修改app.component.html
使用ng add命令，会自动安装模块依赖并配置项目，但是ng-zorro-mobile却不分青红皂白强制把app.component.html的内容替换为其示例内容：
<a href="https://github.com/NG-ZORRO/ng-zorro-antd-mobile" target="_blank" style="display: flex;align-items: center;justify-content: center;height: 100%;width: 100%;">
<img height="300" src="https://gw.alicdn.com/tfs/TB18hC5dPDpK1RjSZFrXXa78VXa-440-550.png">
</a>这是不应该的，所以如果执行了ng add ng-zorro-mobile命令的，记得把app.component.html回滚。
- 因为懒加载，NgZorroAntdMobileModule要调整导入位置
ng-zorro-mobile文档里面说在app.module.ts添加NgZorroAntdMobileModule就完事，其实并不准确的，因为ionic4或angular6项目默认是懒加载的，所以NgZorroAntdMobileModule应该加在懒加载的module上面。
- Modal, Toast等使用上的坑
这个较详细说明一下
在官方文档中，Modal是这样用的： http://ng.mobile.ant.design/#/components/modal/zh
import { Component } from '@angular/core';
import { Modal, Toast } from 'ng-zorro-antd-mobile';
@Component({
selector: 'demo-modal-operation',
template: `
<WingBlank>
<WhiteSpace></WhiteSpace>
<div Button (onClick)="showOpeartion()">operation</div>
<WhiteSpace></WhiteSpace>
</WingBlank>
`,
providers: [Toast, Modal]
})
export class DemoModalOperationComponent {
constructor(private _modal: Modal, private _toast: Toast) {}
showOpeartion() {
Modal.operation([
{ text: '标为未读', onPress: () => console.log('标为未读被点击了') },
{ text: '置顶聊天', onPress: () => console.log('置顶聊天被点击了') }
]);
}
}看到只用了Modal的全局方式，所以个人认为下面这段注入初始化的东西是没有用便去掉：
constructor(private _modal: Modal, private _toast: Toast) {}结果报错不能使用，于是把它重新加回去还是不能使用，提示下面的错误信息：
image.png
这个ModalComponent是什么鬼？还要在entryComponents里面声明？然后就试着在entryComponents加入，并在自动提示下补充import，变成：
import { NgZorroAntdMobileModule, ModalComponent, ToastComponent } from 'ng-zorro-antd-mobile';
@NgModule({
entryComponents: [ModalComponent, ToastComponent],
})然后运行，正常使用！而这些是官方文档没有写的！！
官方文档有待完善一下！
腾讯云开发者
