Ionic 2：生成后退按钮单击事件答案

【问题标题】：Ionic 2: Generated back button click eventIonic 2：生成后退按钮单击事件
【发布时间】：2016-08-11 21:55:03
【问题描述】：

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

这里的 ion-nav-back-button 似乎不再起作用了？

【问题讨论】：

你不能，为什么不添加你自己的？
@LeRoy 到底是你自己添加的吗？抱歉，我是 ionic2 开发的新手..
您需要在页面中做什么？您是否需要仅处理后退按钮的单击，或者您的想法是在用户离开页面时执行某些操作？
@sebaferreras 我需要记录用户点击后退按钮的动作..
ionViewDidLeave 或 ionViewWillLeave 之类的事件可以帮助您实现这一目标吗？通过这些事件，您将能够记录用户何时从该页面返回（通过点击该按钮或任何其他可能使用户离开该页面的按钮）

标签： ionic2

【解决方案1】：

根据the official Ionic docs，可以重写NavBar组件的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();
    }
  }
}

【讨论】：

添加上述代码后我收到此错误：未捕获（承诺）：TypeError：无法设置未定义的属性“backButtonClick”类型错误：无法设置文件未定义的属性“backButtonClick”...
@Biranchi 表示未找到导航栏。仔细检查您的模板页面
同样的问题
这就像在每一页上做的一样。但是我们可以做一些常见的事情吗，比如 write once 应用到任何地方？？
@AnkurShah 您可以使用此代码创建自定义导航栏组件，并在您的应用程序的任何地方使用它...

【解决方案2】：

您需要先将hideBackButton 添加到ion-navbar。它将删除默认的后退按钮。

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

代码：

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

最后一件事：Css。

图标将比通常的后退按钮小。如果你想让它类似于 Ionic2 中使用的默认值，你需要增加它的大小。

.customIcon {

    font-size: 1.7em;
}

【讨论】：

【解决方案3】：

要自定义默认的后退按钮操作，您需要覆盖 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()
     }
   }
}

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

【讨论】：

【解决方案4】：

如果你也想手动操作：

将此添加到您的page.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>

在你的 page.ts 文件中添加：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/awesome/awesome.html',
})
export class AwesomePage {
  constructor(private navCtrl: NavController) {
  }
  goBack(){
    this.navCtrl.pop();
  }

}

【讨论】：

我收到此错误。错误错误：未捕获（承诺中）：导航堆栈需要至少一个根页面

【解决方案5】：

万一有人在看。 Ionic 3 提供生命周期事件。 “ionViewDidLeave”或“ionViewWillLeave”均可用于此类目的。

查看文档以查看更多活动。 https://ionicframework.com/docs/api/navigation/NavController/

【讨论】：

【解决方案6】：

万一有人使用后仍有问题

@ViewChild(Navbar) navBar: Navbar;

尝试不将this.navbar.backButtonClick放入constructor()

或者，您可以将它放在ionViewDidLoad() 它应该可以工作。

【讨论】：