根据我对 Ionic 文档和问题的理解,例如:推送新页面时如何保持tab?
我已经正确完成了防止标签栏被隐藏所需的操作。需要明确的是,当导航在任何选项卡页上启动并且您转到堆栈中的任何其他选项卡页时,选项卡栏会正确显示。每当您从导航控制器或模态控制器等使用“推送”方法时,选项卡栏就会消失。我哪里错了?
在下面的代码中,用户首次下载应用程序时会进入演练。有一个按钮可以将它们带到选项卡栏也应该所在的目录。
如果用户已经看过演练,根页面将设置为主页,其中存在选项卡栏。如果用户使用选项卡栏从主页导航到目录页面,则选项卡栏将保持原位,正确地位于页面底部。
根据我的理解,将 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;
}
})
}
}
...
应用程序组件.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(){}
}
标签.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>