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],
})

然后运行，正常使用！而这些是官方文档没有写的！！

官方文档有待完善一下！