ionic 4 - prevent navigation on ion-back-button

2
votes

Is there a way to implement the ion-back-button without having it automatically trigger nav.pop() ?

The problem stems form the funny custom arrow-back button ionic uses which I can't simply remake.

The snippet below is the closest and simplest approach but the result does not look "identical". It doesn't doesn't automatically hide when the nav stack is empty.

<ion-button slot="start" (click)="onBack()" fill="clear">
    <ion-icon slot="icon-only" name="arrow-back" style="color:#424242"></ion-icon>
</ion-button>

What I would like is

<ion-back-button slot="start" (click)="someCustomLogic()"></ion-back-button>
2
ionic-frameworkionic4

2 Answers

3
votes

Definitely a hack:

<ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button onclick="event.stopImmediatePropagation(); window.myCustomMethod()"></ion-back-button>
    </ion-buttons>
    <ion-title>
      List
    </ion-title>
</ion-toolbar>

Inside ts:

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-list',
  templateUrl: 'list.page.html',
  styleUrls: ['list.page.scss']
})
export class ListPage {

  constructor( private navCtrl: NavController) {
    window['myCustomMethod'] = this.overide;
  }

  overide = () => {
    console.log("hi")
    this.navCtrl.navigateBack('/home')
  }

}
1
votes

Why don't your try something like that :

<ion-row>
  <ion-col tap="someCustomLogic()">
    <ion-icon slot="icon-only" name="arrow-back" style="color:#424242"></ion-icon>
  </ion-col>
</ion-row>