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