• 兼容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  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

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,