每当我使用navCtrl推送新的页面/组件时，Ionic2 - 标签都会消失 [英] Ionic2 - tabs disappear whenever I push a new page/component with navCtrl

问题描述

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

According to my understanding of the Ionic docs and questions like: How to keep tab when pushing a new page?

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

I've correctly done what's necessary to prevent my tabs bar from being hidden. To be clear, the tab bar correctly shows when navigation starts on any tab page and you go to any other tab page in the stack. Whenever you use a "push" method from a nav controller or modal controller etc. the tab bar disappears. Where am I going wrong?

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

In the code below, the person lands on the walkthrough when first downloading the app. There is a button that then takes them to the directory where a tabs bar should also be.

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

In the case when the user has already seen the walkthrough, the root page is set to the home page, where the tab bar exists. If the user navigates to the directory page from the home page using the tab bar the tab bar stays in place, correctly at the bottom of the page.

从我的理解添加tabsHideOnSubPages：false给app.module.ts会阻止这种行为，但它没有。

From my understanding adding tabsHideOnSubPages:false to the app.module.ts will prevent this behavior but it does not.

app.module.ts
...

app.module.ts ...

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

...

app .component.ts
...

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

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

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

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

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>

推荐答案

这是预期的行为。 tabsHideOnSubPages：false 是默认行为。这不是问题。当你 this.navCtrl.push（目录）; 它出现在 WalkThrough 组件之上。 目录不知道标签。

This is the expected behavior. tabsHideOnSubPages:false is the default behavior. Thats not the problem here. When you this.navCtrl.push(Directory); it comes on top of WalkThrough component. Directory is not aware of the tabs.

只有标签页面及其子项将知道选项卡。在这里，您还没有将 Tabs 推入 NavController 。所以nav数组看起来像这样 [WalkThrough，Directory] ​​。相反，您需要 [WalkThrough，Tabs（默认：目录）] 。

Only the Tabs page and its children will be aware of tabs. Here you have not pushed Tabs into the the NavController. So the nav array looks like this [WalkThrough,Directory] . Instead you need [WalkThrough, Tabs(default: Directory)].

您需要推送标签页并设置< ion-tabs selectedIndex =1> 。您可以使用 navParams 来传递需要选择的索引。这是一个模拟。

You need push Tabs page and set <ion-tabs selectedIndex="1">. You can use navParams to pass which index needs to be selected. Here is a mock.

walkthrough.ts
- > this.navCtrl.push（Tabs，{index：1} ）;

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

tabs.ts - > index = navParams.get（'index'）

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

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

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

我没有测试过它。希望它适合你。

I havent tested it. Hope it works for you.

这篇关于每当我使用navCtrl推送新的页面/组件时，Ionic2 - 标签都会消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！