Presently, I am working on developing an application using the latest beta version 4 of Ionic and implementing the tabs layout.
I am still trying to grasp how the navigation works with the new Angular router.
This is my app-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'welcome', loadChildren: './pages/welcome/welcome.module#WelcomePageModule' },
{ path: 'login', loadChildren: './pages/auth/login/login.module#LoginPageModule' },
{ path: 'registration', loadChildren: './pages/auth/registration/registration.module#RegistrationPageModule' },
{ path: 'app', loadChildren: './pages/tabs/tabs.module#TabsPageModule'},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
And this is my tabs.router.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { ContactPage } from '../contact/contact.page';
import { EventOverviewPage } from '../event-overview/event-overview.page';
import { EventDetailPage } from '../event-detail/event-detail.page';
import { ProfilPage } from '../profil/profil.page'
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'eventOverview',
outlet: 'eventOverview',
component: EventOverviewPage,
},
{
path: 'event/:eventId',
component: EventDetailPage,
outlet: 'eventOverview'
},
{
path: 'profil',
outlet: 'profil',
component: ProfilPage
},
{
path: 'contact',
outlet: 'contact',
component: ContactPage
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
When using
router.navigateByUrl('/app/tabs/(eventOverview:eventOverview)')this.router.navigateByUrl('app/tabs/(eventOverview:event/${id})')
Currently, my challenge lies in passing more than one parameter to the EventDetailPage. I read that this can be achieved with the router.navigate([]) function, so I attempted:
this.router.navigate(['/app/tabs/eventOverview'], { queryParams: { eventId: eventId} });
and
this.router.navigate(['/app/tabs/(eventOverview:event)'], { queryParams: { eventId: eventId} });
However, I consistently encounter an error when trying to navigate to the EventDetailsPage:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'app/tabs' Error: Cannot match any routes. URL Segment: 'app/tabs'
It appears that I haven't fully grasped how the routing system functions.
If anyone could provide some guidance, it would be greatly appreciated.
//edit:
Here is an example on StackBlitz: https://stackblitz.com/edit/github-ionic4navigation-emxydw
It is possible to navigate to eventDetails by clicking an item on the list from the start screen for the first time. However, upon returning and attempting again, it no longer works.
Additionally, I am unable to find a way to navigate from the create-event.page to the eventDetails.page.