Ionic 4 - Angular Router

Question

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

//edit:

here is an example in stackblitz. https://stackblitz.com/edit/github-ionic4navigation-emxydw

its possible to go to eventDetails by clicking the first time an item in the list of the start screen. If you go back after and try it again, its not working anymore.

and i cant find a way to navigate from the create-event.page to the eventDetails.page.

Answer 1

Did you try following?

this.router.navigate(['/app/pages/tabs/event', { eventId: eventId}]);

because only the route path: 'event/:eventId', supports a query parameter.

Maybe it's worth to take a look at this article, for more informations about angular routing with ionic: https://www.joshmorony.com/using-angular-routing-with-ionic-4/