Ionic 4 - угловой маршрутизатор

Question

В настоящее время я разрабатываю приложение с новой бета-версией 4 от ionic и макетом вкладок.

Я пока не совсем понимаю, как работает навигация с новым угловым маршрутизатором

Мое приложение-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 {}

Мои 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 {}

с

router.navigateByUrl('/app/tabs/(eventOverview:eventOverview)')

, которые я могу перемещаться кна странице «Обзор», и я могу получить доступ к странице eventDetail с пользовательским идентификатором:

this.router.navigateByUrl('app/tabs/(eventOverview:event/${id})')

В данный момент моя проблема заключается в том, что мне нужно передать более одного параметра в EventDetailPage.Я подчеркнул, что это возможно с помощью функции router.navigate([]), поэтому я попытался

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

и

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

, но всегда возникает ошибка при попытке перейти к EventDetailsPage

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут.Сегмент URL: ошибка «app / tabs»: невозможно сопоставить ни один маршрут.Сегмент URL: 'app / tabs'

Похоже, я не до конца понял, как работает маршрутизация.

Было бы неплохо, если бы кто-нибудь дал мне подсказку

// edit:

вот пример в stackblitz.https://stackblitz.com/edit/github-ionic4navigation-emxydw

можно перейти к eventDetails, щелкнув первый раз в списке на стартовом экране.Если вы вернетесь к нему и попробуете снова, оно больше не работает.

, и я не могу найти способ перейти от create-event.page к eventDetails.page.

Answer 1

Я могу вам сказать, что он жалуется, потому что не понимает, какой маршрут выбрать ...

РЕДАКТИРОВАТЬ

Я немного поиграл с этим вчера вечером, и я думаю, что вы 'Код находится на правильном пути ... Я думаю, что это связано с организацией / структурой ваших модулей маршрутизации. Я думаю, что у вас есть правильный шаблон в начале, но вы теряете его в tabs.router.module.ts.Причиной этого является то, что он ссылается на компоненты, предназначенные для файлов event-Overview-routing.module.ts и event-detail-routing.module.ts.

 children: [
      {
        path: 'eventOverview',
        outlet: 'eventOverview',
        component: EventOverviewPage,
      },
      {
        //path: 'event/:eventId',
        path: 'eventOverview/eventDetails',
        outlet: 'eventOverview',
        component: EventDetailPage,
        children: [
          {
            path: ':id',
            component: EventDetailPage
          },
           {
            path: ':id/:Status',
            component: EventDetailPage
          }
        ]
      },
      {
        path: 'profil',
        outlet: 'profil',
        component: ProfilPage
      }

Если вы хотите перейтик вашему EventDetailPage, то вы должны соответствовать пути path: 'event/:eventId'

Answer 2

Вы пробовали следовать?

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

, потому что только маршрут path: 'event/:eventId', поддерживает параметр запроса.

Может быть, стоит взглянуть на эту статью, для получения дополнительной информации оугловая маршрутизация с ионным: https://www.joshmorony.com/using-angular-routing-with-ionic-4/