每当我使用navCtrl推送新的页面/组件时,Ionic2 - 标签都会消失

Question

根据我对Ionic文档和问题的理解,例如: 如何在推送新页面时保留标签？

我已经正确地完成了防止我的标签栏被隐藏的必要条件.要清楚,标签栏正确显示何时在任何标签页上开始导航,然后转到堆栈中的任何其他标签页.无论何时使用导航控制器或模态控制器等的"推"方法,标签栏都会消失.我哪里错了？

在下面的代码中,当第一次下载应用程序时,此人登陆演练.有一个按钮,然后将它们带到标签栏也应该是的目录.

在用户已经看过漫游的情况下,根页面被设置为主页,其中存在标签栏.如果用户使用标签栏从主页导航到目录页面,则标签栏会保留在页面底部的正确位置.

从我的理解中添加tabsHideOnSubPages:false到app.module.ts将阻止此行为,但它不会.

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>

walkthrough.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.所以nav数组看起来像这样[WalkThrough,Directory].相反,你需要[WalkThrough, Tabs(default: Directory)].

您需要按Tabs页面并进行设置<ion-tabs selectedIndex="1">.您可以使用它navParams来传递需要选择的索引.这是一个模拟.

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

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

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

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