Ionic 3登录跳转TabsPage后底部Tab导航不高亮问题

嗨，这个问题我之前也碰到过～核心原因是直接用setRoot跳转到TabsPage时，Ionic的Tabs组件没法自动感知要激活哪个Tab，咱们得手动指定选中的索引才行。

解决方案步骤： #

1. 跳转时传递选中Tab的索引参数
   修改你登录成功后的跳转代码，在setRoot里加上要选中的Tab索引（比如第一个Tab用0）：

   if (!(<any>window).cordova) {
     return this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider)
       .then(result => {
         let token = result.credential.accessToken;
         let user = result.user;
         console.log(token, user);
         // 传入选中Tab的索引，这里选第一个Tab
         this.navCtrl.setRoot(TabsPage, { selectedTab: 0 });
       });
   }
   

2. 在TabsPage中接收参数并设置选中Tab
   首先在TabsPage的TS文件里引入NavParams，然后通过模板引用变量操作Tabs组件：

   import { Component, ViewChild } from '@angular/core';
   import { NavParams, Tabs } from 'ionic-angular';
   
   @Component({
     selector: 'page-tabs',
     templateUrl: 'tabs.html'
   })
   export class TabsPage {
     @ViewChild('tabRef') tabRef: Tabs;
     tab1Root = HomePage; // 你的第一个Tab页面
     tab2Root = MessagesPage; // 你的第二个Tab页面
   
     constructor(private navParams: NavParams) {}
   
     ionViewWillEnter() {
       // 获取跳转时传入的索引，默认选中第一个Tab
       const selectedTabIndex = this.navParams.get('selectedTab') || 0;
       // 手动选中对应的Tab
       this.tabRef.select(selectedTabIndex);
     }
   }
   

3. 给Tabs组件添加模板引用变量
   在TabsPage的HTML模板里，给ion-tabs加上#tabRef的引用：

   <ion-tabs #tabRef>
     <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab>
     <ion-tab [root]="tab2Root" tabTitle="消息" tabIcon="mail"></ion-tab>
     <!-- 其他Tab -->
   </ion-tabs>
   

为什么会出现这个问题？ #

当从登录页首次跳转到TabsPage时，Tabs组件没有默认的选中状态记忆（因为是第一次加载），而且直接setRoot不会触发Tabs的自动选中逻辑，所以需要咱们手动传递并设置选中索引，这样底部导航的Tab就会正常高亮啦～

内容的提问来源于stack exchange，提问作者TreeZ