ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案

下面是针对“ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案”的完整攻略。

问题描述

在使用Ionic开发应用时，当进入多级目录时，底部导航栏（tabs）会一直显示，而不是随着路由进行相应的隐藏和显示。这样会让应用看起来不太美观，也会影响用户体验。

解决方案

要解决这个问题，我们可以通过Ionic官方提供的ion-router-outlet组件来控制底部导航栏的显隐。

在使用ion-router-outlet时，可以通过在路由配置中添加ion-tab-bar属性，来控制在该路由下是否显示底部导航栏。举个例子，我们可以这样配置一个包含tabs的路由：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'tabs/home',
    pathMatch: 'full'
  },
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../home/home.module').then(m => m.HomePageModule)
          }
        ]
      },
      {
        path: 'about',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../about/about.module').then(m => m.AboutPageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: 'tabs/home',
        pathMatch: 'full'
      }
    ],
    // 配置ion-tab-bar属性，控制底部导航栏显示
    // 此处为true表示在该路由下不显示底部导航栏
    data: { tabbarHidden: true }
  }
];

我们在tabs路由的配置里添加了一个名为tabbarHidden的属性，并把它的值设置为true。这样，当路由切换到tabs页面时，底部导航栏就会被隐藏起来。

但这个解决方案还有一个问题——如果进入到tabs下面的子路由，底部导航栏仍然会一直显示。为了解决这个问题，我们可以通过特殊的路由视图配置来实现。

在对应的tab页中增加ion-tab组件，显示子路由。

<ion-tabs>
  <ion-tab-button tab="tab1">
    <ion-icon name="flash"></ion-icon>
    <ion-label>Tab 1</ion-label>
  </ion-tab-button>

  <!-- IonTab用法示例 -->
  <ion-tab-button tab="tab2">
    <ion-icon name="apps"></ion-icon>
    <ion-label>Tab 2</ion-label>
  </ion-tab-button>

</ion-tabs>

同时，在子路由配置时，也需要加入ion-tab组件，并设置相应的特殊路由配置。

const routes: Routes = [
  {
    path: '',
    component: Tab2Page
  },
  {
    path: 'menu1',
    outlet: 'menu1',
    component: Tab2Menu1Page,
    // 这里实现了通过data属性传递tabbarHidden信息到子路由视图中
    data: { tabbarHidden: true }
  },
  {
    path: 'menu2',
    outlet: 'menu2',
    component: Tab2Menu2Page,
    data: { tabbarHidden: true }
  }
];

相比于前面的例子，这里主要的区别在于，在子路由上增加了一个outlet属性，用以指定该子路由的视图显示在哪个命名的路由出口上，并将tabbarHidden数据传递到子路由的数据中，以此来控制隐藏底部导航栏。

示例

为了更好地说明这个解决方案，这里提供两个使用示例。

示例一

这个示例实现在进入二级路由时隐藏底部导航栏。

首先，我们需要在路由配置中添加tabbarHidden属性。

const routes: Routes = [
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  },
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
          }
        ]
      },
      {
        path: 'details',
        children:[
          {
            path: '',
            loadChildren: () => import('./details/details.module').then(m => m.DetailsPageModule),
            data:{tabbarHidden:true} //控制该路由隐藏底部导航栏
          }
        ]
      }
    ]
  }
];

然后，我们需要在模板文件中动态地隐藏底部导航栏。

<ion-tabs>
  <ion-tab-bar slot="bottom" *ngIf="!isTabBarHidden">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="details">
      <ion-icon name="list"></ion-icon>
      <ion-label>Details</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
  <!-- 这里的outlet就是用来显示DetailsPage的 -->
  <ion-router-outlet name="outlet"></ion-router-outlet>
</ion-tabs>

最后，在DetailsPage中更新isTabBarHidden值，以控制底部导航栏的显隐。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {

  isTabBarHidden = false; 

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // 通过route中的data属性获取tabbarHidden值
    this.isTabBarHidden = this.route.snapshot.data.tabbarHidden;
  }

}

示例二

这个示例演示如何在嵌套的子路由中隐藏底部导航栏。

首先，我们需要在路由配置中为每个子路由增加outlet和data属性。

const routes: Routes = [

  {
    path: '',
    redirectTo: '/tabs/(homeTab:home)',
    pathMatch: 'full'
  },
  {
    path: 'tabs',
    component: TabsPage,
    children:[
      {
        path: '',
        redirectTo: '/tabs/(homeTab:home)',
        pathMatch:'full'
      },
      {
        path: 'home',
        outlet:'homeTab',
        component: HomePage,
        children:[
          {
            path:'inbox',
            outlet:'inboxTab',
            component: InboxPage,
            data:{tabbarHidden:true} //控制该路由隐藏底部导航栏
          },
          {
            path:'dashboard',
            outlet:'dashboardTab',
            component: DashboardPage,
            data:{tabbarHidden:true} //同上
          }
        ]
      }
    ]
  }
];

然后，在模板文件中适当添加IonRouterOutlet组件。

<ion-tabs>
    <ion-tab-button tab="homeTab">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="about">
      <ion-icon name="list"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
      <ion-icon name="list"></ion-icon>
      <ion-label>Contact</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

  <!-- 使用到了多层ion-router-outlets嵌套 -->
  <ion-router-outlet id="myOutlet" name="myoutlet">
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot ="start">
          <ion-back-button defaultHref="/tabs/(homeTab:home)"></ion-back-button>
        </ion-buttons>
        <ion-title>Inbox</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-router-outlet name="inboxTab"></ion-router-outlet>
    </ion-content>
  </ion-router-outlet>
  <!-- 同理 -->
  <ion-router-outlet name="dashboardTab" ></ion-router-outlet>      
  <ion-router-outlet name="homeTab"></ion-router-outlet>

  <ion-router-outlet name="about"></ion-router-outlet>
  <ion-router-outlet name="contact"></ion-router-outlet>

</ion-tabs>

最后，在子页面中即可不用进行其他处理。

总结

通过以上两个示例，相信大家已经掌握了如何通过使用ion-router-outlet组件和特殊的路由配置来控制Ionic应用中底部导航栏的显隐。这样，我们就可以在进入多级目录时，自如地隐藏或显示底部导航栏，为我们的应用增加更好的用户体验。