Im trying to update a legacy ionic app to v4 at the moment but cant seem to find a v4 equivalent to this navigation
return this.app.getRootNav().setPages([
{page: Profile},
{page: SettingsPage, params: {id: userId}}
])
3 Answers
Ionic4 and angular version of your request is like this :
this.router
.navigate(["/page1"], { replaceUrl: true })
.then(() => this.router.navigate(["/page2"]));
The logic is here as i understand. Push page1 into history but navigate to page2 so if user pushes the back button it redirects to page1. Here is the stackblitz sample.
4 Comments
Alexandre Khoury
Thank you for your answer, but for some reason I am not able to reproduce this in an Ionic project. I tried the same code in Ionic 4 and the intermediary page (page1, or in my example tab2) still is loaded and shown. See my stackblitz example you can clearly see the red color showing and the console log. Do you have any idea why ?
Eldar
@Mageek i tried it sth like this
await Promise.all([ this.router.navigate(["/tabs/tab2"], { replaceUrl: true }), this.router.navigate(["/tabs/tab3"]) ]); and it navigated to tab3 without visiting tab2 but this way tab2 didn't push in to history the reason for that may be it is in a lazy loaded module.Alexandre Khoury
I don't think the reason is lazy-loading, because even after opening tab2 once (which should have it loaded then right?), the behavior is the same.
Flavien Volken
@Eldar Promise.all will concurrently run all the promises not sequentially. This is probably not what you are expecting. Just stack await statements to do this sequentially.
Sorry I read your question too late (just today), but to be able to find the best answer for your question I recommend you take a look at Ionic 4 Routes to find the best solution for you and since I had no enough time to go deeper to find the optimal solution then I will try to describe how I think it should be achieved and then you seek the optimal method to do it:
If I get your question then all you need is to get benefit of the new Ionic navigation control method which is called "Routes"
when you need to specify the order of your navigation stack to hold the following order Profile->SettingPage so settings page on top and you can navigate back to Profile then instead of doing this like:
return this.app.getRootNav().setPages([
{page: Profile},
{page: SettingsPage, params: {id: userId}}
])
you can simply:
show your page SettingsPage with the required parameters as a root page by using something like this (assuming SettingsPage route path is "settings"):
inside your app-routing.module.ts:
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
{ path: 'profile', loadChildren: './pages/profile/profile.module#ProfilePageModule' },
{ path: 'settings/:id', loadChildren: './pages/settings/settings.module#SettingsPageModule' }
];
and your button that should navigate to the SettingsPage should be something like this (notice routerDirection="root" which will show your page as a root page that would help you get benefit of another attribute which is the defaultHref):
<ion-button
expand="block"
[routerLink]="['/settings/', userId]"
routerDirection="root"
></ion-button>
at your /settings page to navigate back to your profile page you can use the "defaultHref" attribute which will define the previous page in the navigation stack when nothing else in the stack exists (which is guaranteed because we set the page as a root page). This back button should look something like this:
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-back-button defaultHref="/profile"></ion-back-button>
</ion-buttons>
<ion-title>Profile</ion-title>
</ion-toolbar>
you can notice at route you think it the inverse way (you first put yourself in the required page and then define the default page that should show when you navigate back.
I don't know if that is exactly what you need but that at least what I have understood from your question and that is the "routes" way to do it.
2 Comments
Alexandre Khoury
Thank you for answering. This is an interesting approach, but I'm afraid this is not exactly what I'm looking for because, while it works with the UI back button, it doesn't work with the android back button, or with the browser history back button, or with the iOS "swipe to go back".
AMS
Now I got your point exactly, and I guess it is better to handle this through a native plugin (Capacitor or Cordova). if I were you and insist on it to be like before exactly then I would do it in a plugin that has one function setPages which get same arguments and do the following: (Android => build UI stack which is obvious, iOS => access
navigationController.viewControllers=@[profileViewController, settingsViewController]; and as for browser and history I guess it is also doable but haven't tried it to be honest)If I am understanding your question correctly you need to create an array of routes and pass it to the routermodule. I generally create a separate routing module that looks like this:
const routes: Routes = [
{
path:'',
redirectTo: 'home',
pathMatch: 'full',
},
{
path'home',
component: HomePage
}
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
I believe for ionic 4, you can use the exact same routing techniques that are listed on the main angular site: https://angular.io/tutorial/toh-pt5
1 Comment
Kravitz
I know that but my question was about how to port the above setPages to angular
await this.navCtrl.navigateRoot('/page1'); this.navCtrl.navigateForward('/page2', { animated: false });but the problem is that we can still see the first page appear for an instant.