离子2取消硬性后退按钮替代->当用户位于主选项卡页面之一上时，关闭后退按钮上的应用程序 [英] 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 的信息，并在此获得了一些信息关于离子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()，因为引用

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

it 建议 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).

因此，在与嵌入选项卡"页面的页面有关的页面中，我在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.

就是这样.

这篇关于离子2取消硬性后退按钮替代->当用户位于主选项卡页面之一上时，关闭后退按钮上的应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！