Ionic 2 取消硬 BACK 按钮覆盖 ->当用户在主标签页之一上时关闭应用程序后退按钮 [英] Ionic 2 cancel hard BACK button override -> To close app on back button when user is on one of the main Tab pages

问题描述

如果用户在两个主页面之一上，我希望有 android 后退按钮来关闭应用程序.两个页面都可以使用两个选项卡按钮导航到，这两个选项卡都显示在这两个页面上.但是在我希望保持正常堆栈页面行为的任何其他页面上.

I want to have the android back button to close the app if the user is on one of the two main pages. Both pages can be navigated to with two tabs button, which are shown on those both pages. But on any other pages I want to keep normal stack pages behaviour.

我阅读了 registerBackButtonAction 并在此获得了一些信息关于 Ionic 1 的线程.

I read about registerBackButtonAction and also got some information in this thread concerning Ionic 1.

我创建了一个自定义行为来关闭应用程序:

I created a custom behaviour to close the app:

private registerSpecificActionOnBackButton = () => {
  if(this.platform.is('android')||this.platform.is('windows')){
    this.platform.registerBackButtonAction(function(e){
      this.platform.exitApp();
    }.bind(this),101);
  }
}

我的想法是在需要这种行为的页面的ionViewWillEnter()函数中调用registerSpecificActionOnBackButton()函数.

My idea is to call the registerSpecificActionOnBackButton() function in the ionViewWillEnter() function on the pages where this behaviour is needed.

但 我无法使用 deRegisterSpecificActionOnBackButton() 函数取消 ionViewWillLeave() 函数上的该行为，我已经尝试过:

But I don't manage to cancel that behaviour on the ionViewWillLeave() function with a deRegisterSpecificActionOnBackButton() function, I've tried among other things:

private deRegisterSpecificActionOnBackButton = () => {
  if(this.platform.is('android')||this.platform.is('windows')){
    this.platform.registerBackButtonAction(function(e){return true},101);
  }
}

或者

private deRegisterSpecificActionOnBackButton = () => {
  if(this.platform.is('android')||this.platform.is('windows')){
    this.platform.registerBackButtonAction(function(event){event.unbind()},101);
  }
}

但我碰巧被卡住了.有没有人知道取消自定义 registerBackButtonAction?

But I happen to be stuck. Has anyone any idea about canceling a custom registerBackButtonAction?

推荐答案

我已经按预期完成了这项工作:当应用程序位于可以通过选项卡菜单访问的页面之一时，点击后退按钮时它会关闭(在 Android 上).

I've managed to make this work as I expect: When the app is on one of the pages that can be reached thru the tabs menu, it closes when the back button is hitten (on Android).

首先，暂时忘记 registerBackButtonAction() 因为引用了 这个帖子 2016-08-05:

First, forget about the registerBackButtonAction() for the moment because as quoting what is explained in this thread of 2016-08-05:

它建议s不要试图覆盖默认的后退按钮行为.

it suggests not trying to override the default back button behavior.

所以我一直在寻找其他解决方案.我发现了一个不是很干净但可以工作的.

So I've looked for other solutions. I've found one that is not really clean but works.

首先，我查看了是否可以使用 remove(startIndex, removeCount, opts) 使用 NavControler 重置堆栈.但这不起作用，因为两个主要页面都嵌入在标签页中(就像显示的那样 那里).

To begin with, I looked if I could reset the stack with the NavControler using remove(startIndex, removeCount, opts). But that doesn't work out because the two main pages are embeded in the tab page (like it is shown there).

因此，当您在其中一个页面上时， NavController 是一个 Tab 而其 parent 是一个 Tabs.

So when you're on one of those pages the NavController is a Tab and the parent of that is a Tabs.

在Tabs 中有一个名为_selectHistory 的数组变量._selectHistory 数组似乎具有类似于堆栈的作用.因此，当使用两个选项卡按钮从一个页面导航到另一个页面时，可以在 console.info(this.[NavControler var of the page].parent._selectHistory) 中看到数组随着选项卡按钮被交替点击.在真实设备上尝试时，返回按钮会带您从一个页面切换到另一个页面，直到数组为空，然后按下下一个返回按钮关闭应用程序.

In Tabs there is a Array variable named _selectHistory. The _selectHistory array seems to have a role similar to the stack. So when navigating from one page to another using the two tab buttons, one can see in a console.info(this.[NavControler var of the page].parent._selectHistory) that the array grows as the tab buttons are hitten alternatively. And when trying on a real device, the back button take you back switching from one page to another until the array is empty and then the next back button hit closes the app.

因此我想:让我们看看如果我覆盖该数组的值会发生什么.它不能通过应用于 Tabs 对象的函数来完成(与 NavController 不同).

Hence I thought: Let see what happens if I override the value of that array. It cannot be done thru a function to apply on a Tabs object (unlike what is possible with NavController).

所以在关于我嵌入在 Tab 页中的页面的页面中，我在 ionViewWillEnter() 中添加了以下内容:

So in the Page concerning my pages embedded in the Tab page, I added the following in ionViewWillEnter():

ionViewWillEnter(){
   this.navCtrl.parent._selectHistory=[];
}

This.navCtrl 是我在页面构造函数中传入的 NavController 对象.

This.navCtrl is my NavController object passed in the constructor of the page.

就是这样.

这篇关于Ionic 2 取消硬 BACK 按钮覆盖 ->当用户在主标签页之一上时关闭应用程序后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！