如何在Ionic应用的Intro页面隐藏Tabs，其他页面显示Tabs

根据你的代码结构，我整理了两种可行的方案，推荐第一种，逻辑更清晰，完全贴合你的需求：

方案一：调整App根页面结构（推荐） #

这个方案的核心是把Intro页面设为App的初始根页面，而非作为Tabs的一个tab项。当用户从Intro跳转到其他页面时，再进入Tabs导航，自然就会显示tabs了。

步骤1：修改app.component.ts，把根页面改为IntroPage #

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { IntroPage } from '../pages/intro/intro'; // 导入IntroPage

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = IntroPage; // 将根页面替换为IntroPage
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

步骤2：修改tabs.ts，移除IntroPage作为tab项 #

现在Tabs只保留需要显示tabs的页面：

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';
import { Page1} from '../page1/page1';
import { Page2} from '../page2/page2';
import { Page3} from '../page3/page3';
import { Page4} from '../page4/page4';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root = Page1;
  tab2Root = Page2;
  tab3Root = Page3;
  tab4Root = Page4;
  selectedTab: number = 0; // 默认选中第一个tab

  constructor(private navParams: NavParams) {
    // 接收从Intro页面传来的tab索引参数
    const tabIndex = this.navParams.get('selectedTab');
    if (tabIndex !== undefined) {
      this.selectedTab = tabIndex;
    }
  }
}

步骤3：修改intro.ts，跳转至TabsPage并指定目标tab #

不再直接跳转到单个页面，而是跳转到Tabs导航，并传递选中tab的参数：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TabsPage } from '../tabs/tabs'; // 导入TabsPage

@Component({
  templateUrl: 'intro.html'
})
export class IntroPage {
  constructor(public navCtrl: NavController) {}

  openPageOne() {
    // 跳转到TabsPage并选中第一个tab（对应Page1）
    this.navCtrl.setRoot(TabsPage, { selectedTab: 0 });
  }

  openPageTwo() {
    this.navCtrl.setRoot(TabsPage, { selectedTab: 1 });
  }

  openPageThree() {
    this.navCtrl.setRoot(TabsPage, { selectedTab: 2 });
  }

  openPageFour() {
    this.navCtrl.setRoot(TabsPage, { selectedTab: 3 });
  }
}

步骤4：修改tabs.html，绑定选中tab的索引 #

<ion-tabs [selectedIndex]="selectedTab">
  <ion-tab [root]="tab1Root" tabTitle="Page1" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Page2" tabIcon="star"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Page3" tabIcon="settings"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Page4" tabIcon="person"></ion-tab>
</ion-tabs>

这样设置后，打开App首先进入无tabs的Intro页面，点击任意按钮后进入Tabs导航，所有目标页面都会显示tabs，完全符合你的需求。

方案二：在Tabs组件内控制显示隐藏（不推荐，适合不想改根页面的场景） #

如果不想调整根页面结构，依然保留TabsPage作为初始页面，可以通过监听tab切换，动态控制tabs的显示和隐藏：

步骤1：修改tabs.ts #

import { Component, ViewChild } from '@angular/core';
import { Tabs, NavParams } from 'ionic-angular';
import { IntroPage } from '../intro/intro';
import { Page1} from '../page1/page1';
import { Page2} from '../page2/page2';
import { Page3} from '../page3/page3';
import { Page4} from '../page4/page4';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('mainTabs') tabs: Tabs;
  tab1Root = IntroPage;
  tab2Root = Page1;
  tab3Root = Page2;
  tab4Root = Page3;
  tab5Root = Page4;
  showTabs: boolean = true;

  constructor() {}

  ionViewDidEnter() {
    // 监听tab切换事件，判断当前页面是否为IntroPage
    this.tabs.subscribe((tab) => {
      this.showTabs = tab.root !== IntroPage;
    });

    // 初始加载时检查当前页面
    this.showTabs = this.tabs.selectedTab.root !== IntroPage;
  }
}

步骤2：修改tabs.html #

<!-- 当不是Intro页面时显示tabs -->
<ion-tabs #mainTabs *ngIf="showTabs">
  <ion-tab [root]="tab1Root" tabTitle="Intro" tabIcon="info"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Page1" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Page2" tabIcon="star"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Page3" tabIcon="settings"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="Page4" tabIcon="person"></ion-tab>
</ion-tabs>

<!-- 当是Intro页面时，直接显示Intro内容，不显示tabs -->
<ion-nav *ngIf="!showTabs" [root]="tab1Root"></ion-nav>

这个方案可以实现需求，但页面切换时可能会有细微的视觉跳动，所以更推荐方案一。

内容的提问来源于stack exchange，提问作者Daniel Omara