美文网首页
ionic踩坑

ionic踩坑

作者: 小胖子嘿嘿嘿 | 来源:发表于2017-10-30 16:44 被阅读0次

1. tab+NavController

使用tab组件,执行页面跳转后,新页面仍然会包含tab,很多时候我们希望退出tab到新的页面。这里我们不能直接使用

this.navCtrl.push(SomePage);

而要用

this.app.getRootNav().push(SomePage);

2. 删除历史记录

比如我们完成登录以后进入首页,用户操作后退按钮时,我们不希望还能回溯到登录页,这时候需要删除登录页的历史记录。这时,我们只需要添加以下代码:

        //前往首页
        this.navCtrl.push(HomePage, {
        })
        .then(() => {
          const startIndex = this.navCtrl.getActive().index - 1;
          console.log(startIndex)
          this.navCtrl.remove(startIndex, 1);
        });

3. 跨页面数据通信

主要使用事件机制。比如假设接口返回登录态失效,我们需要跳转到登录页。但由于已经把http相关功能抽象到专门的网络接口处理模块了,而作为一个Injectable模块不能直接处理NavController的跳转,否则会报错,这主要是为了保证数据层和具体处理逻辑的分离。这时候我们使用事件的方式来进行通知:

 import { Events } from 'ionic-angular';
 @Injectable()
 export class HttpService { 
      ...
      private event: Event,
      ...
 }
 this.events.publish('token:expired', Date.now());

然后在具体的业务页面接收事件并作出相应处理:

    constructor(public navCtrl: NavController,
        public events: Events,
        public app: App,
        public navParams: NavParams)  {
        events.subscribe('token:expired', (timestamp)=>{
            this.navCtrl.push(LoginPage);
        })
    }

值得注意的是,这里不需要在每个页面添加这个逻辑,否则会跳转多次,也就是说事件会向所有页面广播。

相关文章

  • ionic2+angular2中踩的那些坑

    ionic2+angular2中踩过的坑

  • ionic踩坑

    1. tab+NavController 使用tab组件,执行页面跳转后,新页面仍然会包含tab,很多时候我们希望...

  • Gulp构建angularjs项目

    前言 接触Angular和ionic也有一个多月了,一路上连续踩坑.不过也正常,学一门新东西,就得做好踩坑的准备。...

  • ionic3升级适配angular5

    昨天angular5和ionic3同时发布更新了,为了用上angular5的新特性,还是有必要踩下坑的,当然踩坑的...

  • Ionic 入门踩坑记录

    从零开始安装配置 ionic 并创建 helloIonic 项目 推荐安装 node v6.10.2 LTS 版本...

  • ionic 踩坑的记录

    ionic cordova run android --livereload 报错 err_cleartext_...

  • ionic 填坑之 Cannot download node

    前言 最近准备学习 ionic ,结果刚创建工程就开始踩坑了,好吧,把坑填一下 错误 解决方法 原因是node-s...

  • ionic2踩坑记

    最近做项目需要使用到ionic2,因为之前使用过ionic和angularjs,所以基础的内容就不在这里细说了,想...

  • IONIC ANDROID 开发环境搭建

    做完两个Ionic项目后, 真的是踩坑无数. 开发Android, 光配置环境就弄得你不要不要的. 内心一个崩溃接...

  • 2018搭建react-native项目踩坑记录

    公司项目本来一直用的ionic,这次想试一下RN,就来踩坑了,现在项目还没全部写完,问题不少= =,有新的继续更新...

网友评论

      本文标题:ionic踩坑

      本文链接:https://www.haomeiwen.com/subject/wlfmpxtx.html