Ionic - 导航到具有特定 Id 错误的 Ionic 选项卡页面：无法匹配任何路由。网址段：

Question

我正在开发具有以下用例的应用程序，但我不确定如何实现。

我在显示游戏/比赛结果列表的页面上。当我单击该特定游戏时，我希望进入该游戏的更详细页面，但是此详细页面是一个标签页（上面有 2 个标签）。

这是我的游戏列表页面中的代码：

 <ion-card *ngFor="let match of matches; let i = index"  tappable routerLink="/../match-details/match-details-info/{{match.id}}" 

一旦我点击那个离子卡，我想被带到一个有标签的页面 - 我想 URL 应该看起来像 /match-details/match-details-info/XYZ1234345 但我不确定如何到达那里。

这是我的 match-details-routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MatchDetailsPage } from './match-details.page';

const routes: Routes = [
  {
    path: '',
    component: MatchDetailsPage,
    children: [

      {
        path: 'match-details-info/:id',
        children: [
          {
            path: '',
            loadChildren: '../match-details-info/match-details-info.module#MatchDetailsInfoPageModule'
          }
        ]
      },
      {
        path: 'match-details-lineup/:id',
        children: [
          {
            path: '',
            loadChildren: '../match-details-lineup/match-details-lineup.module#MatchDetailsLineupPageModule'
          }
        ]
      },
       {
        path: 'match-details-scorers/:id',
        children: [
          {
            path: '',
            loadChildren: '../match-details-scorers/match-details-scorers.module#MatchDetailsScorersPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/match-details/match-details-info',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/match-details/match-details-info',
    pathMatch: 'full'
  } 
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MatchDetailsPageRoutingModule {}

这是我看到的错误

Error: Cannot match any routes. URL Segment: 'match-details/match-details-info/inhOKexG3AtcJNnj0xyW'
Error: Cannot match any routes. URL Segment: 'match-details/match-details-info/inhOKexG3AtcJNnj0xyW' 

网址对我来说看起来是正确的，但由于某种原因它与路线不匹配。

还包括部分app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './services/user/auth.guard';

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'match-details/:id', loadChildren: './pages/match-details/match-details.module#MatchDetailsPageModule' },
  { path: 'player-details/:id', loadChildren: './pages/player-details/player-details.module#PlayerDetailsPageModule' },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  //{ path: 'admin-home-tabs, loadChildren: './pages/admin-home-tabs/admin-home-tabs.module#AdminHomeTabsPageModule' },
  { path: 'reset-password', loadChildren: './pages/reset-password/reset-password.module#ResetPasswordPageModule' },

Answer 1

在您的路线上，您可以在match-details-info 页面的路径中包含/:id，如下所示，这表明该页面接受了一个id 参数

const routes: Routes = [
  {
    path: '',
    component: MatchDetailsPage,
    children: [

      {
        path: 'match-details-info/:id',
        children: [
          {
            path: '',
            loadChildren: '../match-details-info/match-details-info.module#MatchDetailsInfoPageModule'
          }
        ]
      },
      {
        path: 'match-details-lineup',
        children: [
          {
            path: '',
            loadChildren: '../match-details-lineup/match-details-lineup.module#MatchDetailsLineupPageModule'
          }
        ]
      },
       {
        path: 'match-details-scorers',
        children: [
          {
            path: '',
            loadChildren: '../match-details-scorers/match-details-scorers.module#MatchDetailsScorersPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/match-details/match-details-info',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/match-details/match-details-info',
    pathMatch: 'full'
  } 
];

ion-card 上的 routerLink 应包含 match-details-info 路径以直接导航到选项卡，然后您还应将获取 id 的代码移动到 match-details-info 页面

<ion-card *ngFor="let match of matches; let i = index"  tappable routerLink="/../match-details/match-details-info/{{match.id}}"