ionic3 踩坑之路

ionic部分

生命週期

ionic有自身的生命週期，不可與angular混用;

路由

ionic有自身的路由機制，不可用angular路由;

ionic顏色定製

• 坑：ionic的部分組件是有color屬性，更改其組件顏色只需更改其color值，開發時須要新的顏色，直接改style太粗暴。
• 解決：theme目錄下variables.scss可在$colors處定製顏色。

頁面組件ion-content

• 坑：頁面默認有下拉阻尼效果，咱們不想要頁面能夠被下拉
• 解決：給ion-content標籤加no-bounce屬性

下拉刷新組件ion-refresher

• 坑：下拉時準備動畫消失
• 解決：給ion-refresher組件加上ionPull事件。
• 坑：當使用橫向滾動組件時，觸發refresher組件。
• 解決：給橫向滾動組件加摁下和離開事件，改變一個布爾值的值，把這個值與ion-refresher enabled屬性綁定。

• <ion-refresher [enabled] ='refresherB && showLoading$ | async' pullMin='60' pullMax='300' (ionPull)='doRefress()' (ionRefresh)="doRefresh($event)"></ion-refresher>   
  
  複製代碼

navCtrl.push

• 坑：navCtrl.push到一個新頁面後須要底部tabs消失
• 解決：

• //在頁面構造前的鉤子上加上
  let elements = document.querySelectorAll(".tabbar");
  if (elements != null) {
       Object.keys(elements).map((key) => {
           elements[key].style.display = 'none';
       });
   }
   //在頁面銷燬的鉤子上加上 
   let elements = document.querySelectorAll(".tabbar");
   if (elements != null) {
     Object.keys(elements).map((key) => {
       elements[key].style.display = 'flex';
     });
   }
  複製代碼

ion-tabs組件

• 坑：ion-tab沒法經過常規方式定製圖標
• 解決：經過sass指令遍歷要替換的圖標名稱，實行替換

angular部分

無關聯組件間通信

• 坑：無關聯組件如何更優雅的通信
• 解決：註冊一個全局的服務，建立一個可觀察的對象，而後在須要的組件訂閱它。

• public eventBus:Subject<string> = new Subject<string>();
  複製代碼

Animations 動畫模塊

• 坑：Safari默認不支持angular的所用Animations
• 解決：npm i web-animations-js 以後在polyfills文件引入
• 坑：從服務端取到數據後給定義的變量賦值，全部相關dom都觸發動畫效果
• 解決：取到數據後，不要作賦值操做，在原變量上進行增刪操做。

ngRx與髒檢查

• 坑：當頁面邏輯複雜時，生命週期沒法知足對狀態的管理。
• 解決：使用ngRx來優雅的進行狀態管理，由於ngRx對狀態的管理基於流，angualr的生命週期基於髒檢查，兩種不一樣的邏輯，因此應在項目開始時就決定是否使用。
• 坑：使用ngRx後組件狀態混亂
• 解決：使用ngRx應關閉angualr髒檢查機制

• @Component({
    changeDetection:ChangeDetectionStrategy.OnPush
  });
  複製代碼

• 坑：關閉angular髒檢查後，須要使用髒檢查檢查更新組件時
• 解決：引入angualr的ChangeDetectorRef組件在組件構造函數聲明後調用其detectChanges()方法觸發刷新。

HttpClientModule

• 坑：jsonp
• 解決：angular4.3以後推出的HttpClient對jsonp很是不友好，除了發請求功能全無，沒法設置查詢參數（能夠用拼字符串解決），和後臺協商使用get或post；
• 坑：查詢參數 HttpParams 的set方法
• 解決：每當調用 set() 方法，將會返回包含新值的 HttpParams 對象，所以若是使用下面的方式，將不能正確的設置參數。

• //沒法正確設置，這是angualr4.3以前http模塊的寫法
  const params = new HttpParams();
  params.set('orderBy', '"$key"');
  params.set('limitToFirst', "1");
  //代替方案
  const params = new HttpParams();
  params = params.append('orderBy', "$key");
  params = params.append('limitToFirst', "1");
  複製代碼

• 坑：post請求查詢參數設置
• 解決：post請求依然可使用HttpParams對象做爲設置查詢參數方式，爲了不出問題最好params.toString();