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