离子4 - 角度路由器

Question

目前我开发了一个新的beta版本4离子和标签布局的应用程序.

我还不太了解新角度路由器的导航是如何工作的

我的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 {}

我的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 {}

同

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

我能够导航到Overview页面,我可以使用自定义ID访问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时,总是会抛出一个错误

错误错误:未捕获(承诺):错误:无法匹配任何路由.网址细分:'app/tabs'错误:无法匹配任何路由.网址细分:'app/tabs'

似乎我还没有完全理解路由的工作原理.

如果有人能给我一个提示,那会很好

//编辑:

这是stackblitz的一个例子. https://stackblitz.com/edit/github-ionic4navigation-emxydw

可以通过单击开始屏幕列表中的第一个项目来转到eventDetails.如果你回去再试一次,那就再也不行了.

我无法找到从create-event.page导航到eventDetails.page的方法.

Answer 1

你尝试跟随吗？

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

因为只有路由 path: 'event/:eventId',支持查询参数。

也许值得看一下这篇文章，了解有关 ionic 角度路由的更多信息： https://www.joshmorony.com/using-angular-routing-with-ionic-4/