ionic 3 tabs 硬件后退按钮不会退出答案

【问题标题】：ionic 3 tabs hardware back button won't exitionic 3 tabs 硬件后退按钮不会退出
【发布时间】：2018-01-06 04:21:51
【问题描述】：

我有一个基于 super template 的 ionic 3 应用程序。我已将根页面设置为以下内容：

<ion-tabs>
    <ion-tab [root]="tab1Root" [tabTitle]="tab1Title" tabIcon="bonfire"></ion-tab>
    <ion-tab [root]="tab2Root" [tabTitle]="tab2Title" tabIcon="search"></ion-tab>
    <ion-tab [root]="tab3Root" [tabTitle]="tab3Title" tabIcon="cog"></ion-tab>
</ion-tabs>

当我按下此页面上的硬件返回按钮时，什么也没有发生。但是，当我将内容更改为其他内容时，例如：

<p>Hello</p>

然后硬件后退按钮退出，如我所愿。

如何使硬件后退按钮在选项卡式页面上正常工作，同时保留其他页面上的工作默认行为？

【问题讨论】：

选项卡（任何选项卡页面）的默认行为一旦堆栈为空然后它将关闭它不会移动到以前的选项卡
@MohanGopi 我的问题是，一旦堆栈为空，它就永远不会关闭。一旦我在标签页上，后退按钮什么也不做。
请评论所有注册的后退按钮操作，然后尝试您将获得默认行为
@MohanGopi 没有。我在整个项目中搜索了registerBackButtonAction，没有找到结果
那么肯定还有其他问题，为什么不尝试创建一个新的选项卡项目并简单地将其安装在您的设备中并检查，这样您就会知道后退按钮操作有什么区别使用这个命令创建项目ionic start myApp tabs并将其部署到设备中

标签： android cordova ionic-framework ionic3

【解决方案1】：

在您的app.component.ts 文件中

import { Nav, App } from 'ionic-angular';

export class MyApp {
@ViewChild(Nav) nav: Nav;

然后

         platform.registerBackButtonAction(() => {
           let nav = app.getActiveNav();
           let activeView: ViewController = nav.getActive();

           if(activeView != null){
             if(nav.canGoBack()) {

               nav.pop();
             }else if (typeof activeView.instance.backButtonAction === 'function')
             {
               activeView.instance.backButtonAction();
             }
             else {

               nav.parent.select(0); // goes to the first tab
             }
           }
         });

希望这对您有所帮助，也不要忘记将其放在平台内。

在您需要关闭应用程序的 ts 文件中编写一个函数

backButtonAction(){
  this.platfrom.exitApp();
}

【讨论】：

这帮助我到达了我需要的地方，但它仍然没有真正退出应用程序。请参阅我的回答，了解我是如何完成的stackoverflow.com/a/48195605/998251
为了退出应用程序只需在主页中编写名为 backButtonAction() 的函数并检查它会退出应用程序

【解决方案2】：

我最终需要在 app.container.ts 中执行此操作以获得所需的行为：

platform.registerBackButtonAction(() => {
    let nav = app.getActiveNav();
    let activeView = nav.getActive();
    if (activeView != null){
        if (nav.canGoBack()) {
           nav.pop();
        } else if (nav.parent.getSelected() != nav.parent.getByIndex(0)) {
            // goes to the first tab
            nav.parent.select(0);
        } else {
            platform.exitApp();
        }
     }
});

【讨论】：

【解决方案3】：

在您的标签页中尝试添加 ionViewDidEnter 并尝试附加以下类，如下所示：

ionViewDidEnter() {
                   this.platform.registerBackButtonAction(() => {
                        this.platform.exitApp();
                   });
             }

【讨论】：

【解决方案4】：

在 constructor() 中编写您的代码，您将从哪个页面离开。

Home.ts

 constructor(
    public navCtrl: NavController,
    private platform: Platform) {
    this.platform.registerBackButtonAction(()=>{
      this.platform.exitApp();
    });
  }

【讨论】：