ionic3 踩坑之路

範兒發表於2018-12-18

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();

相關文章