Wednesday, 17 October 2018

Ionic 4 - Angular Router

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