angular - Ionic2 - 每当我使用 navCtrl 推送新页面/组件时，选项卡就会消失

Question

根据我对 Ionic 文档和问题的理解，例如: How to keep tab when pushing a new page?

我已经正确地做了必要的事情来防止我的标签栏被隐藏。需要明确的是，当导航在任何标签页上开始并且您转到堆栈中的任何其他标签页时，标签栏会正确显示。每当您使用导航 Controller 或模态 Controller 等的“推送”方法时，选项卡栏就会消失。我哪里错了？

在下面的代码中，用户在首次下载应用程序时进入了演练。有一个按钮，然后将它们带到标签栏也应该所在的目录。

在用户已经看过演练的情况下，根页面设置为主页，其中存在标签栏。如果用户使用选项卡栏从主页导航到目录页面，则选项卡栏会保留在原位，正确地位于页面底部。

根据我的理解，将 tabsHideOnSubPages:false 添加到 app.module.ts 将阻止此行为，但事实并非如此。

应用程序模块.ts...

imports: [
    IonicModule.forRoot(MyApp, {
       tabsHideOnSubPages:false
    })
]

...

应用程序组件.ts...

import { Tabs } from '../pages/tabs/tabs';
import { Walkthrough } from '../pages/walkthrough/walkthrough';
@Component({
  templateUrl: 'app.html'
})

export class MyApp {
  rootPage: any = Tabs;
  launchObject:any;
   constructor(private platform: Platform){
     platform.ready().then(() => {
       if(justDownloadedApp){
         this.rootPage = Walkthrough;
       }
     })
   }
 }

...

app.component.html

<ion-nav [root]="rootPage"></ion-nav>

标签.ts

import { Component } from '@angular/core';
import { Home } from '../home/home';
import { Directory } from '../directory/directory';

@Component({
  templateUrl: 'tabs.html'
})
export class Tabs {
  tab1Root: any = Home;
  tab2Root: any = Directory;
  constructor(){}
}

tabs.html

<ion-tabs>
   <ion-tab [root]="tab1Root" tabsHideOnSubPages="false" tabTitle="Spotlight" tabIcon="flash"></ion-tab>
  <ion-tab [root]="tab2Root" tabsHideOnSubPages="false" tabTitle="Stores" tabIcon="cart"></ion-tab>
</ion-tabs>

演练.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Directory } from '../directory/directory';

@Component({
  selector: 'walkthrough',
  templateUrl: 'walkthrough.html'
})
export class Walkthrough {
  constructor(public navCtrl: NavController){}

  toDirectory(): any{
    this.navCtrl.push(Directory);
  }
}

walkthrough.html

<ion-header class="opaque"></ion-header>
<ion-content class="walkthroughBackground">
   <ion-col>
       <ion-row>
          <button class="clear-button-two" (click)="toDirectory()">Directory</button>
       </ion-row>
   <ion-col>
</ion-content>

Answer 1

这是预期的行为。 tabsHideOnSubPages:false是默认行为。那不是这里的问题。当你this.navCtrl.push(Directory);它位于 WalkThrough 之上成分。 Directory不知道选项卡。

只有 Tabs页面及其子项将知道选项卡。这里你没有推送Tabs进入NavController .所以导航数组看起来像这样 [WalkThrough,Directory] .相反，您需要 [WalkThrough, Tabs(default: Directory)] .

您需要推送标签页并设置<ion-tabs selectedIndex="1"> .您可以使用 navParams通过需要选择哪个索引。这是一个模拟。

演练.ts -> this.navCtrl.push(Tabs,{index: "1"});

tabs.ts -> index = navParams.get('index')

tabs.html -> <ion-tabs selectedIndex= {{index}} >

我还没有测试过。希望它对你有用。