Ionic 3：页面离开时取消标签页选中状态的实现方法

看起来你是在Ionic项目里遇到的这个问题对吧？我来给你几个可行的方案：

方案一：利用Ionic原生Tabs控制器（官方推荐） #

如果你的标签页是用Ionic原生Tabs组件实现的，可以通过页面生命周期钩子配合Tabs控制器来重置选中状态：

1. 首先在页面组件中注入Tabs控制器：

// 针对Ionic v4+版本
import { Tabs } from '@ionic/angular';
import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController, private tabs: Tabs) {}

2. 在页面即将离开的生命周期钩子中取消选中：

ionViewWillLeave() {
  // 将选中索引设为-1，就能取消所有标签页的选中状态
  this.tabs.selectedIndex = -1;
}

如果是Ionic v3及更早版本，写法略有不同：

import { Tabs } from 'ionic-angular';

constructor(public navCtrl: NavController, public tabs: Tabs) {}

ionViewWillLeave() {
  // 传入-1来取消选中状态
  this.tabs.select(-1);
}

方案二：自定义标签栏的处理方式 #

如果你的标签栏是自己实现的自定义组件，需要先维护一个选中状态的变量（比如activeTabId），再通过以下方式处理：

1. 创建一个共享服务管理标签栏状态：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TabStateService {
  private activeTabSubject = new BehaviorSubject<string | null>(null);
  activeTab$ = this.activeTabSubject.asObservable();

  setActiveTab(tabId: string | null) {
    this.activeTabSubject.next(tabId);
  }
}

2. 在自定义标签栏组件中订阅状态并更新样式：

import { TabStateService } from './tab-state.service';

constructor(private tabStateService: TabStateService) {}

ngOnInit() {
  this.tabStateService.activeTab$.subscribe(tabId => {
    // 根据tabId更新标签栏的选中样式
    this.activeTabId = tabId;
  });
}

3. 在要离开的页面中调用服务重置状态：

ionViewWillLeave() {
  this.tabStateService.setActiveTab(null);
  this.navCtrl.setRoot('xxxxx');
}

这样在你跳转到新页面时，标签栏的选中状态就会被清空啦。

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