离子2：生成后退按钮单击事件

Question

我想记录用户单击导航栏中生成的后退按钮的操作，但找不到处理单击事件？

它似乎像从这里离子导航后退按钮不工作了？

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

}

Answer 2

如果你想太多手动做到这一点：

添加到您的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(); 
    } 

} 

Answer 3

您需要先添加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 4

对于自定义默认返回按钮的动作，你需要重写backButtonClick（）方法的NavBar组件。

在你的“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.

Answer 5

为了防止有人正在寻找过测试。 Ionic 3提供生命周期事件。 “ionViewDidLeave”或“ionViewWillLeave”可用于此目的。

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