如何在离子 3 中单击设备后退按钮时从选项卡 2 导航到选项卡 1

Posted 2023-02-21

【中文标题】如何在离子 3 中单击设备后退按钮时从选项卡 2 导航到选项卡 1

【英文标题】：How to navigate from tab2 to tab1 on clicking device back button in ionic3

【发布时间】：2018-04-14 17:49:25

【问题描述】：

我正在关注这个https://ionicframework.com/docs/components/#tabs

登录后，我使用此键导航到下一页 this.navCtrl.setRoot("tabs"); 我会自动看到在我的选项卡中选择的主页选项卡/tab1。

我总共有 5 个标签 Tab1、Tab2、Tab3、Tab4、Tab5。

初始 Tab1 被选中。当我导航到任何选项卡（如 Tab2/Tab3）并单击设备后退按钮时，我无法导航到上一个选项卡。

我的理解：

因为我有 5 个选项卡，所以当每个选项卡被选中时，新堆栈就会启动。

我相信我必须导航到 Stack to Stack 是否可能，如果可以，任何建议都会对我有所帮助。

【问题讨论】：

我认为previousTab(trimHistory) function 可以提供帮助。只需处理后退按钮单击并选择上一个选项卡

如何使用它任何例子都会有很大帮助@Duannx

【参考方案1】：

试试这个： 在 tabs.html 中

<ion-tabs #myTabs>
    ...
</ion-tabs>

在 tabs.ts 中

  @ViewChild('myTabs') tabRef: Tabs;
  constructor(public navCtrl: NavController, public platform: Platform) 
    platform.ready().then(() => 
      platform.registerBackButtonAction(() => 
        let tabPrv = this.tabRef.previousTab(false);//Remember pass false
        if (tabPrv) this.tabRef.select(tabPrv.index);//Here you go back to prv Tab
        return false;//Make sure return false to prevent exit app
      )
    )
  

【参考方案2】：

let tabPrv = this.tabRef.previousTab(true); //Remember pass true
if (tabPrv) this.tabRef.select(tabPrv.index);

如果您传递 true，它将记住所有以前的历史记录，如果您传递 false，它将只记住以前的选项卡。