ionic3 踩坑之路

290 阅读1分钟

生命周期

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