ionic3页面跳转

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

}  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值