Question

目前，我正在开发具有新的beta 4版本的ionic和标签页布局的应用程序。

我还不太了解新的角度路由器的导航方式

我的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)')

我能够导航到“概述”页面，我可以使用以下自定义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时总是抛出错误

错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL段：“ 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',支持查询参数。

也许值得看一下这篇文章，以获取有关离子型角向铣削的更多信息： https://www.joshmorony.com/using-angular-routing-with-ionic-4/

Answer 2

我可以告诉你，它在抱怨，因为它不知道选择哪条路线...

编辑

昨晚我玩了一段时间，我认为您的代码处在正确的轨道上。我认为这与路由模块的组织/结构有关。我认为您具有正确的模式一开始是正确的，但是您在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'

离子4-角形路由器

2 个答案:

编辑