Ионный 2: Сгенерированное событие нажатия кнопки "Назад"

Ответ 1

В соответствии с официальными документами Ionic вы можете переопределить метод backButtonClick() компонента 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();
    }
  }

}

Ответ 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

Если вы тоже хотите сделать это вручную:

Добавьте это в свой 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();
  }

}

Ответ 4

Для настройки действия кнопки "назад" по умолчанию вам нужно переопределить метод backButtonClick() компонента NavBar.

В вашем "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.

Ответ 5

В случае, если кто-то смотрит. Ionic 3 предлагает события жизненного цикла. Для этих целей можно использовать либо "ionViewDidLeave", либо "ionViewWillLeave".

Просмотрите документы, чтобы увидеть больше событий. https://ionicframework.com/docs/api/navigation/NavController/