I have a little Ionic 4 App with 2 Tabs and 1 Detail Page.
The Problem I'm facing here is that if I go from Tab2 into Detail Page and from there with ion-back-button
back it always redirect me to Tab1 instead of Tab2 where I was before.
Here is my example:
Tab2 Html: Here I have a simple ion-item with a click event:
<ion-item class="chat-item" (click)='openChat()' >
It calls the openChat funtion which works like this:
openChat() {
this.router.navigateByUrl('/chatdetail/:uid');
}
Now it opens my Chatdetail Page in which I have placed a Back Button to navigate back like this:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>chatdetail</ion-title>
</ion-toolbar>
</ion-header>
But when I click this Button it doesn't just "pop" the page like it was in Ionic3 instead it directs me to the root page of my App which is Tab1.
Is there any way of overwriting that back event to go to the page I was before?
The hardware back button is found on most Android devices. In native applications it can be used to close modals, navigate to the previous view, exit an app, and more. By default in Ionic, when the back button is pressed, the current view will be popped off the navigation stack, and the previous view will be displayed.
to A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined ion-route-redirect rule matches, the router will redirect to the path specified in this property.
In Ionic 4 with Angular routing, there is no root page to be defined. Because Ionic 4 relies on Angular's router, the NavController has been changed to reflect this new reality, and for an Angular application there is no such a thing like "root" route.
Show activity on this post. Just do the following if you wanna go back to your previous route. This'll pop the current page from the navigation stack and return you to the previous page and the part of the page from where you had navigated forward.
Update:
Ionic team has fixed this on Ver: 4.3.0
Old
You need to use defaultHref="/Tab2"
like so:
<ion-back-button defaultHref="/Tab2"></ion-back-button>
The url to navigate back to by default when there is no history.
https://ionicframework.com/docs/api/back-button
How to go to the previous page?
import { Location } from "@angular/common";
constructor(private location: Location) { }
myBackButton(){
this.location.back();
}
You should navigate as
<ion-item class="chat-item" [routerLink]="[/chatdetail, 123]" routerDirection="forward">
routerDirection="forward"
stacks detailPage on Tabs pages and you will be navigated back to right tab page
:}
by using nav-control we can go back like following
add public navCtrl: NavController in the constructor
back(){
let animations:AnimationOptions={
animated: true,
animationDirection: "back"
}
this.navCtrl.back(animations)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With