ionic3页面跳转
龚超 2018-03-28 来源 : 阅读 2250 评论 0

(1)ionic3页面间数据传递

Push():要将新页面推送到堆栈,可使用push方法。同时也可以通过将数据传递给push   方法的第二个参数,来将数据传递给下一个页面。

import {LoginPage } from'./login';

pushPage(){

this.navCtrl.push(LoginPage, { id: 123, name: "Carl" });

}

[navParams]属性:

import {LoginPage } from'./login';

@Component()

class MyPage {

params; pushPage: any;

constructor(){

this.pushPage= LoginPage;

this.params ={ id:123, name: "Carl" };

}

}

然后在模板中跳转:

<button ion-button [navPush]="pushPage [navParams]="params">

 Go

</button>

modal的create方法(与push()同理,数据作为create()方法的第二个参数)

import {LoginPage } from'./login';

presentLoginPage() {

let modal =this.modalCtrl.create(LoginPage ,

{ id:123,name: "Carl"}

);

modal.present();

}

数据传递到下个页面后用NavParams来接收数据。

首先导入NavParams ,然后注入到构造函数。

import { NavParams } from 'ionic-angular';

userInfo;

constructor(public params: NavParams) {

this.userInfo = params.data;

}

这就可以得到整个对象。也可以使用params的get()方法接收,传入对象属性作为get()的参数

this.params.get('id');

(2)ionic3中隐藏子页面tabs选项卡

第一种ionic隐藏全部底部tabs切换菜单的方法: 隐藏全部子页面的tabs选项界面

找到app.module.ts文件 ,修改如下代码
  imports: [
    IonicModule.forRoot(MyApp,{
      tabsHideOnSubPages: 'true'         //隐藏全部子页面tabs
    })
  ]
 第二种:ionic隐藏某个子页面的tabs ;     

 这种方法的缺点是:当子页面使用pop()方法退出时,父页面的任何事件都不响应。
   import { App } from 'ionic-angular';           //1.引入App类
   constructor(private app:App) {}                 //2.声明初始化app对象
   this.app.getRootNav().push(nextPage);       //3.调用this.app.getRootNav() 从根页面跳转就可以了

第三种:隐藏指定子页面的tabs,此种方式是dom操作的方式,利用ionic的生命周期函数来完成  
//ionic中当页面进入初始化的时候触发的生命周期方法
ionViewDidLoad(){
    let elements = document.querySelectorAll(".tabbar");
    if (elements != null) {
       Object.keys(elements).map((key) => {
          elements[key].style.display = 'none';
         });
       }   
  }
  //ionic当退出页面的时候触发的方法
ionViewWillLeave() {
    let elements = document.querySelectorAll(".tabbar");
    if (elements != null) {
Object.keys(elements).map((key) => {
    elements[key].style.display = 'flex';
});
}

}  


本文由 @职坐标 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论
本文作者 联系TA

擅长针对企业软件开发的产品设计及开发的细节与流程设计课程内容。座右铭:大道至简!

  • 370
    文章
  • 45144
    人气
  • 83%
    受欢迎度

已有24人表明态度,83%喜欢该老师!

进入TA的空间
求职秘籍 直通车
  • 资料领取 资料领取 资料领取
  • 答疑解惑 答疑解惑 答疑解惑
  • 技术交流 技术交流 技术交流
  • 职业测评 职业测评 职业测评
  • 面试技巧 面试技巧 面试技巧
  • 高薪秘笈 高薪秘笈 高薪秘笈
TA的其他文章 更多>>
WEB前端必须会的基本知识题目
经验技巧 93% 的用户喜欢
Java语言中四种遍历List的方法总结(推荐)
经验技巧 91% 的用户喜欢
Java语言之SHA-256加密的两种实现方法详解
经验技巧 75% 的用户喜欢
java语言实现把两个有序数组合并到一个数组的实例
经验技巧 75% 的用户喜欢
通过Java语言代码来创建view的方法
经验技巧 80% 的用户喜欢
其他海同师资 更多>>
吕益平
吕益平 联系TA
熟悉企业软件开发的产品设计及开发
孔庆琦
孔庆琦 联系TA
对MVC模式和三层架构有深入的研究
戴懿颢​
戴懿颢​ 联系TA
20年+嵌入式开发经验,精多语言 / 云 / 安全 / 数据库
郭自琦
郭自琦 联系TA
16年物联网经验,涉多项目,多校授课,出版书籍并研发IT教程
余承民
余承民 联系TA
8年开发+5年教学经验,指导数千名学员高薪就业
经验技巧30天热搜词 更多>>

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved