Ioni c - Перейдите на страницу вкладок Ioni c с указанным c Id Ошибка: невозможно сопоставить никакие маршруты. Сегмент URL: - PullRequest
Новая
       24

Ioni c - Перейдите на страницу вкладок Ioni c с указанным c Id Ошибка: невозможно сопоставить никакие маршруты. Сегмент URL:

0 голосов
/ 20 апреля 2020

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

Я на странице со списком результатов игр / матчей. Когда я нажимаю на эту конкретную игру, я хочу перейти на более подробную страницу для этой игры, однако эта подробная страница является страницей вкладок (на ней 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'

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

Также включает часть 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' },

1 Ответ

1 голос
/ 20 апреля 2020

На ваших маршрутах вы можете включить /:id в путь к странице match-details-info, как показано ниже, это будет означать, что страница принимает параметр 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'
  } 
];

routerLink на вашем ion-card должен затем включать путь match-details-info для перехода непосредственно на вкладку, затем вы должны также переместить код для получения идентификатора на страницу сведений о совпадении 

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