Ionic2 - 每当我使用 navCtrl 推送新页面/组件时，选项卡就会消失 [英] 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

<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);
  }
}

演练.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(Directory); 它出现在 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 页面及其子页面会知道标签.在这里，您还没有将 Tabs 推送到 NavController 中.所以导航数组看起来像这样 [WalkThrough,Directory] .相反，您需要 [WalkThrough, Tabs(default: Directory)].

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)].

你需要推送Tabs页面并设置.您可以使用 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.

演练.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.

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