angular – Ionic2 – 只要我使用navCtrl推送新页面/组件,标签就
根据我对Ionic文档和问题的理解,例如:
How to keep tab when pushing a new page? 我已经正确地完成了防止我的标签栏被隐藏的必要条件.要清楚,标签栏正确显示何时在任何标签页上开始导航,然后转到堆栈中的任何其他标签页.无论何时使用导航控制器或模态控制器等的“推”方法,标签栏都会消失.我哪里错了? 在下面的代码中,当第一次下载应用程序时,此人登陆演练.有一个按钮,然后将它们带到标签栏也应该是的目录. 在用户已经看过漫游的情况下,根页面被设置为主页,其中存在标签栏.如果用户使用标签栏从主页导航到目录页面,则标签栏会保留在页面底部的正确位置. 从我的理解添加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>
这是预期的行为. tabsHideOnSubPages:false是默认行为.这不是问题.当你这个.navCtrl.push(目录);它位于WalkThrough组件之上.目录不知道选项卡.
只有选项卡页面及其子项才会知道选项卡.在这里,您还没有将Tabs推入NavController.所以nav数组看起来像这样[WalkThrough,Directory].相反,你需要[WalkThrough,Tabs(默认:目录)]. 您需要按Tabs页面并设置< ion-tabs selectedIndex =“1”>.您可以使用navParams传递需要选择的索引.这是一个模拟. walkthrough.ts tabs.ts – > index = navParams.get(‘index’) tabs.html – > < ion-tabs selectedIndex = {{index}}> 我没有测试过它.希望对你有效. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |