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

Question

根据我对Ionic文档的理解和以下问题：推送新页面时如何保留制表符？

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

在下面的代码中，用户在第一次下载应用程序时登录漫游。有一个按钮，然后将它们带到标签栏所在的目录。

在用户已经看过漫游的情况下，根页面将设置为主页，其中存在选项卡栏。如果用户使用选项卡栏从主页导航到目录页，则选项卡栏将保持在页面底部的正确位置。

据我所知，在app.module.ts中添加tabsHideOnSubPages:false可以防止这种行为，但事实并非如此。

app.module.ts…

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

app.component.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>

tabs.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}} >

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