Ionic2 Ionic 2：生成的后退按钮单击事件

我正在尝试记录用户单击导航栏中生成的后退按钮的操作，但找不到处理单击事件的方法

---

这里的ion nav back按钮似乎不再工作了？

如果您想手动操作：

将此添加到

页面.html

<ion-header>
    <ion-toolbar>
        <ion-buttons start>
            <button (click)="goBack()" royal>
                <ion-icon name="arrow-round-back"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>Details page</ion-title>
    </ion-toolbar>
</ion-header>

---

您需要首先将

hideBackButton

添加到

ion导航栏

。它将删除默认的后退按钮

然后添加您自己的按钮，您可以通过单击事件轻松管理该按钮

代码：

<ion-header>
 <ion-navbar hideBackButton>
    <ion-buttons left>
        <button ion-button (click)="doYourStuff()">
            <ion-icon class="customIcon" name="arrow-back"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Page Title</ion-title>
 </ion-navbar>
</ion-header>

doYourStuff()
{
    alert('cowabonga');
    this.navCtrl.pop();  // remember to put this to add the back button behavior
}

根据，您可以覆盖导航栏组件的

backButtonClick（）

方法：

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

@Component({
  selector: 'my-page',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>
          MyPage
        </ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content>
    ...
    </ion-content>
   `
})
export class MyPage {
  @ViewChild(Navbar) navBar: Navbar;
  constructor(private navController: NavController){}
  ionViewDidLoad() {
    this.navBar.backButtonClick = (e:UIEvent)=>{
     // todo something
     this.navController.pop();
    }
  }
}

从'@angular/core'导入{ViewChild}；
从“离子角度”导入{Navbar}；
@组成部分({
选择器：“我的页面”，
模板：`
我的网页
...
`
})
导出类MyPage{
@ViewChild（导航栏）导航栏：导航栏；
构造函数（专用navController:navController）{}
ionViewDidLoad（）{
this.navBar.backButtonClick=（e:UIEvent）=>{
//做点什么
this.navController.pop（）；
}
}
}

对于自定义默认后退按钮操作，您需要覆盖NavBar组件的backButtonClick（）方法

在“customClass.ts”中导入导航栏组件。为覆盖默认行为创建auxMethod，并在ionViewDidLoad方法中调用

import { Navbar } from 'ionic-angular';

   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()
     }
   }
}

---

此代码已在爱奥尼亚3中进行了测试。以防有人查看。离子3提供生命周期事件。“ionViewDidLeave”或“ionViewWillLeave”均可用于此类目的

查看文档以查看更多事件。

---

以防有人在使用后仍有问题

@ViewChild（导航栏）导航栏：导航栏；

尝试NOT将

this.navbar.backButtonClick

放入

构造函数（）

---

或者，您可以将它放在

ionViewDidLoad（）

上，它应该可以工作。

您不能，为什么不添加您自己的呢？@LeRoy您到底添加了您自己的吗？对不起，我是ionic2开发的新手。您需要在页面中做什么？你是只需要点击后退按钮，还是想在用户离开页面时做点什么？@sebafereras我需要记录用户点击后退按钮的动作..像

ionViewDidLeave

或

ionViewWillLeave

这样的事件可以帮助你实现这一点吗？当用户从该页面返回时（通过点击该按钮或任何其他可能使用户离开该页面的按钮），您将能够记录这些事件。添加上述代码后，我收到此错误：Uncaught（in promise）：TypeError:无法设置未定义类型的属性'backButtonClick'。错误：无法在文件…@Biranchi中设置未定义类型的属性'backButtonClick'。这表示未找到导航栏。再次检查你的模板页面这里的相同问题这就像在每个页面上做的一样。但是我们可以做一些常见的事情吗，比如写一次应用到任何地方？？？@AnkurShah你可以用这段代码创建一个自定义的导航栏组件，并在你的应用程序中的任何地方使用它…我收到了这个错误。错误错误：Uncaught（承诺中）：导航堆栈至少需要一个根页面

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

@Component({
  selector: 'my-page',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>
          MyPage
        </ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content>
    ...
    </ion-content>
   `
})
export class MyPage {
  @ViewChild(Navbar) navBar: Navbar;
  constructor(private navController: NavController){}
  ionViewDidLoad() {
    this.navBar.backButtonClick = (e:UIEvent)=>{
     // todo something
     this.navController.pop();
    }
  }
}

import { Navbar } from 'ionic-angular';

   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()
     }
   }
}