web-dev-qa-db-fra.com

Ionic 2: événement de clic généré sur le bouton de retour

J'essaie de consigner l'action de l'utilisateur consistant à cliquer sur le bouton Précédent généré dans la barre de navigation, mais je ne parviens pas à gérer l'événement click.

Il semble que le bouton ion-nav-back d'ici ne fonctionne plus?

ionic2
18
Teddy Ding

Selon les documents officiels Ionic , vous pouvez remplacer la méthode backButtonClick() du composant NavBar:

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

Vous devez d’abord ajouter hideBackButton au ion-navbar. Cela supprimera le bouton retour par défaut.

Ensuite, vous ajoutez votre propre bouton que vous pouvez facilement gérer avec un événement de clic.

LE CODE: 

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

Dernière chose: Css.

L'icône sera plus petite que le bouton retour habituel. Si vous voulez le rendre similaire à celui par défaut utilisé dans Ionic2, vous devez augmenter sa taille.

.customIcon {

    font-size: 1.7em;
}
13
FrancescoMussi

Pour personnaliser l'action du bouton Précédent par défaut, vous devez remplacer la méthode backButtonClick () du composant NavBar.

Dans votre "customClass.ts" importez le composant Navbar. Créez auxMethod pour remplacer le comportement par défaut et appelé dans votre méthode 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()
     }
   }
}

Ce code a été testé en ionic 3.

5
Ariel Antonio Fundora

Si vous voulez aussi le faire manuellement:

Ajoutez ceci à votre 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>

Ajoutez dans votre fichier 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();
  }

}
1
LeRoy

Au cas où quelqu'un regarde. Ionic 3 propose des événements du cycle de vie. "IonViewDidLeave" ou "ionViewWillLeave" peuvent être utilisés à cette fin.

Consultez la documentation pour voir plus d'événements . https://ionicframework.com/docs/api/navigation/NavController/

0
Junaid

Si quelqu'un a toujours un problème après avoir utilisé 

@ViewChild(Navbar) navBar: Navbar;

essayezPASpour mettre le this.navbar.backButtonClick dans la constructor() 

Sinon, vous pouvez le placer à ionViewDidLoad() cela devrait fonctionner.

0
lowzhao