離子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/