Ionic 2 自定义后退按钮操作答案

【问题标题】：Ionic 2 customize back button actionIonic 2 自定义后退按钮操作
【发布时间】：2017-04-22 12:02:17
【问题描述】：

我想自定义此屏幕截图中提到的后退按钮的单击操作。我希望通过单击我不会返回上一页而是返回到我自己指定的页面，或者在返回之前进行处理。

【问题讨论】：

你想要什么样的定制。我认为 ionic 默认在子页面上提供此图标
我希望通过单击我不会返回上一页而是返回到我自己指定的页面，或者在返回之前进行处理。

标签： angular typescript ionic2 ionic3

【解决方案1】：

你可以尝试使用ionViewCanLeave or ionViewWillLeave事件。

请参阅此issue #9533 并建议区分“返回”导航的离开事件。一旦实施，这对您的用例会很方便。

【讨论】：

【解决方案2】：

要自定义默认的后退按钮操作，您需要覆盖 NavBar 组件的 backButtonClick() 方法。

第 1 步：在您的 "custom-class.ts" 中导入导航栏组件。创建 auxMethod 以覆盖默认行为并在您的 ionViewDidLoad 方法中调用。

import { Navbar } from 'ionic-angular';
import { ViewChild } from '@angular/core';

export class myCustomClass {
    @ViewChild(Navbar) navBar: Navbar;

    ionViewDidLoad() {
        this.setBackButtonAction()
    }

    //Method to override the default back button action
    setBackButtonAction(){
       this.navBar.backButtonClick = () => {
       //Write here wherever you wanna do
          this.navCtrl.pop()
       }
    }
}

此代码已在 ionic 3 中测试过。

【讨论】：

@theHellyar 您必须导入 NavBar 并使用“navBar”名称创建变量。
@ArielAntonioFundora 原来它是一个组件的视图子，所以我不得不引用组件的视图子......所以基本上是一个视图子的视图子......感谢您的回答！

【解决方案3】：

您只需从 ViewController 堆栈中删除当前索引

从 'ionic-angular' 导入 { ViewController}；

      constructor(public navCtrl: NavController, public viewCtrl: ViewController) {
      }


this.navCtrl.push("APage").then(() => {
      const index = this.viewCtrl.index;
      this.navCtrl.remove(index,1);
    });

【讨论】：