ionic3+ 中隱藏子頁面tabs選項卡的幾種方法

聲明：內容來源

http://www.ionic.wang/article-index-id-89.html

此處做個記錄。

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中當頁面進入初始化的時候觸發的生命週期方法
ionViewDidEnter(){
    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';
});
    }

}