currently i develop an application with the new beta version 4 of ionic and the tabs layout.
I do not quite understand yet how the navigation with the new angular router works
My app-routing.module.ts is
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 {}
My tabs.router.module.ts is:
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 {}
with
router.navigateByUrl('/app/tabs/(eventOverview:eventOverview)')
im able to navigate to the Overview page and i can access the eventDetail page with a custom id with:
this.router.navigateByUrl('app/tabs/(eventOverview:event/${id})')
At the moment my problem is, that i need to pass more then one parameter to the EventDetailPage. I red that this is possible with the router.navigate([]) function, so i tried
this.router.navigate(['/app/tabs/eventOverview'], { queryParams: { eventId: eventId} });
and
this.router.navigate(['/app/tabs/(eventOverview:event)'], { queryParams: { eventId: eventId} });
but there is always an error thrown when i try 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 seems like i haven't completly understood how the routing works.
Would be nice if someone could give me a hint
from Ionic 4 - Angular Router
No comments:
Post a Comment