离子2:生成后退按钮点击事件

Question

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

看起来这里的离子导航后退按钮不再起作用了？

Answer 1

根据官方Ionic文档,您可以覆盖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();
    }
  }
}

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

Answer 3

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

在"customClass.ts"中导入Navbar组件.创建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中进行了测试.