-
兼容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的内容替换为其示例内容：
<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) {}
结果报错不能使用，于是把它重新加回去还是不能使用，提示下面的错误信息：
这个ModalComponent是什么鬼？还要在entryComponents里面声明？然后就试着在entryComponents加入，并在自动提示下补充import，变成：
import { NgZorroAntdMobileModule, ModalComponent, ToastComponent } from 'ng-zorro-antd-mobile';
@NgModule({
entryComponents: [ModalComponent, ToastComponent],
})
然后运行，正常使用！而这些是官方文档没有写的！！
最后我还是要吐槽下以下几个东西：
官方文档有待完善一下！
示例代码有属性，但说明文档没有描述，如picker中的extra、arrow文档都是没有描述的：
<ListItem Picker
[extra]="name2"
[arrow]="'horizontal'"
[cascade]="false"
[data]="seasons"
[title]="'选择季节'"
[value]="value2"
(onOk)="onOk2($event)"
>
无意义代码不少，如下面的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,
