ionic V3.10 開發踩坑集錦(一)

最近在用ionic 開發程序，把踩過的坑記下來和你們分享下，但願對其餘人有幫助。 版本號以下：

• ionic: 3.10.3
• cordova: 7.0.1

以前寫過一篇V3.3的踩坑集錦，地址以下：ionic V3.3開發踩坑集錦，假如二者有衝突的地方，以這篇爲準。

1. 在子界面的html中設置ion-nav標籤，會自動添加上返回箭頭，而在rootPage中自動去掉它。在瀏覽器中調試時，保存添加ion-nav的修改，瀏覽器自動刷新，可是並未顯示修改，將瀏覽器的地址修改爲localhost:8100,從新運行便可。緣由是保存自動刷新會將此子頁面放置在root中，因此返回鍵不會出現。

2. 使用ionic generate page demo建立新的界面，而後從其餘界面跳轉過去，可能會報錯cannot find module '../demo'，此時嘗試中斷運行，從新鍵入ionic serve運行。

3. ionic 時間選擇器的用法：

   html:

   <ion-datetime displayFormat="YYYY年MM月" cancelText="取消" doneText="肯定" [(ngModel)]="myDate" (ngModelChange)="changeDate($event)"></ion-datetime>
   複製代碼

   ts:

   private myDate='2017-10';// 注意：必定要寫成‘YYYY-MM-DD’這樣的形式，不要寫成‘YYYY/MM/DD’等其餘的樣式，不用與ion-datetime標籤設置的樣式同樣
   複製代碼

4. 能夠在app.module.ts中設置子界面隱藏Tab，代碼以下：

import { ErrorHandler, NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
  import { MyApp } from './app.component';
  @NgModule({
    declarations: [
     MyApp,
   ],
   imports: [
     BrowserModule,
    IonicModule.forRoot(MyApp, {
    tabsHideOnSubPages: true // 主要是這句，參見：http://ionicframework.com/docs/api/config/Config/
      })
   ],
   bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: []

  })
  export class AppModule { }
複製代碼

5. 使用Echarts，直接經過npm安裝，而後在使用的文件中import echarts from 'echarts';，簡單方便。這個本質是Angular如何安裝第三方js庫，具體能夠參見：https://segmentfault.com/q/1010000010230463

推薦

最後推薦下我寫的ionic的小項目，具體能夠參見 適合ionic初學者的小項目