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。

• 污染了小部分ionic4样式，如默认字体大小等

手动配置样式变量、自行调整样式。

• 原有项目使用ng add ng-zorro-mobile会被强制修改app.component.html

使用ng add命令，会自动安装模块依赖并配置项目，但是ng-zorro-mobile却不分青红皂白强制把app.component.html的内容替换为其示例内容：

这是不应该的，所以如果执行了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: `
    
      
      
operation
      
    
  `,
  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],
})

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

最后我还是要吐槽下以下几个东西：

官方文档有待完善一下！

示例代码有属性，但说明文档没有描述，如picker中的extra、arrow文档都是没有描述的：

无意义代码不少，如下面的temp

 getResult(result) {
    this.value = [];
    let temp = '';
    result.forEach(item => {
      this.value.push(item.label || item);
      temp += item.label || item;
    });
    return this.value.map(v => v).join(',');
  }

  getValue(result) {
    let value = [];
    let temp = '';
    result.forEach(item => {
      value.push(item.label || item);
      temp += item.label || item;
    });
    return value;
  }

代码规范有待加强一下！

如样式本来大多都是am-前缀，但是又夹杂了不少不协调内容，会污染原有样式：

.footer {
  height: 54px;
  line-height: 54px;
  text-align: center;
}
.spinner {
  margin: auto;
  width: 12px;
  height: 12px;
  position: relative;
}
.SliderMarks,
.am-steps,
.SliderTrack,