html代码:
<ion-tabs #myTabs> <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="商家" tabIcon="cart"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="我的" tabIcon="md-contact"></ion-tab> <div class="nav3" (click)="change()"></div> </ion-tabs>
tabs跳转控制代码
@IonicPage() @Component({ templateUrl: 'tabs.html' }) export class TabsPage { tab1Root = 'HomePage'; tab2Root = 'StoreNearbyPage'; tab3Root = 'MinePage'; @ViewChild('myTabs') tabRef: Tabs; constructor(public navCtrl: NavController) { } change() { if (localStorage.getItem('token')) { this.tabRef.select(2); } else { this.navCtrl.push('LoginPage') } } }
就是在我的tab栏上加了一个透明块,点击透明块的时候如果已经登录调用tab组件的select方法,选中tab实现跳转配置页面。如果未登录就使用ionic的页面跳转。把登录页push进去。
用户在我的tab栏下子页面退出登录,因为不能直接调用navCtrl.pop()方法返回我的页面。
子页面退出方法
import {IonicPage, NavController, NavParams, Navbar, App, ViewController} from 'ionic-angular'; out() { this.common.$http('DELETE', '/logout') .subscribe(res => { localStorage.clear(); this.appCtrl.getRootNav().push('TabsPage'); }) }
注入ionic-angular的APP模块。直接把tab页面丢回根导航。这样在其他tab下面的子页面退出的时候就能返回首页了。
可能描述的不太好。至说出了个大概处理的思路。有想法的童鞋可以留言指导