IONIC back button not working at any case

user_1682525 0
Viewed 2989

I trying to use ionic-back-button. When the app loads I am redirected to account page which is core.page.ts. In this page I have two button with routerlink login and sign up. When I click login button in core.page.html I get redirected to login page. The back button also appears. But when click on that back button it does nothing except that ripple effect. Am not sure why. Please help.

In my app.routing.module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: 'account',
    pathMatch: 'full'
  },
  {
    path: 'account',
    loadChildren: () => import('./core/core.module').then( m => m.CorePageModule)
  }
];

In my core.routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: CorePage
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'register',
    component: RegisterComponent
  },
];

in my core.page.html

<div class="button_wrap">
  <ion-button color="success" [routerLink]="['/account/register']"  expand="block">Sign Up</ion-button>
  <ion-button color="light" [routerLink]="['/account/login']"  expand="block">Log In</ion-button>
</div>

In my login page

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/" icon="chevron-back-outline" text="Back"></ion-back-button>
    </ion-buttons>
    <ion-title>LOGIN</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <p> login works! </p>

</ion-content>

Similar stories mentioned here but no exact solution.

Ionic Framework Forum 1

Ionic Framework Forum 2

ionic-framework angular
5 Answers

Not a perfect solution for this scenario but it does work with smooth animation.

<ion-back-button (click)="goBack()"></ion-back-button>

import { IonRouterOutlet } from '@ionic/angular';
goBack() {
    this.routerOutlet.pop();
}

back button hack source code link

Credit link

user_16825250

working very well on ionic 5, to make a button go back to the previous page Step 1: on your .ts file import this

import { IonRouterOutlet } from '@ionic/angular';

Step 2: add it to your constructor on the .ts file

constructor( private routerOutlet: IonRouterOutlet ) { }

Step 3: define go back function

 goBack() { this.routerOutlet.pop(); }

Step 4: use it in your .html file

<ion-icon (click)="goBack()" slot="start" name="arrow-back-outline"></ion-icon>
user_113558520

try this,it resloved my problem:

<ion-back-button text="返回" (click)="pop()"></ion-back-button>
import {NavController} from '@ionic/angular';
export class XXComponent{
constructor(private navCtrl: NavController) {}
  async pop() {
    await this.navCtrl.pop();
  }
}
user_83609280

you can assign 'root' as routerDirection on back-button:

<ion-button class="root" routerLink="/home" routerDirection="root">Home</ion-button>

When you want go go back to previous page use:

back(): void {
    this.router.navigate("..");
}

It seems your code with defaultHref

<ion-back-button defaultHref="/"

is not working here, replace it.

user_119517220 
<ion-buttons slot="start">
      <ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>

You will have to provide the page URL.

user_150907930
Related