Навигация по трудностям К определенной странице с подробностями, содержащей вкладки - PullRequest
Новая
       16

Навигация по трудностям К определенной странице с подробностями, содержащей вкладки

0 голосов
/ 26 марта 2019

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

Когда я нажимаю на ионную карту, я хочу перейти на новую страницу, которая показывает больше деталей (прочитано из Firebase), которые относятся к этому устройству - я могу сделать это без проблем.

Моя проблема возникает, когда я пытаюсь добавить немного больше сложности - на этой конкретной странице сведений я хочу представить 2 вкладки - 1 вкладка (вкладка по умолчанию) содержит, например, отчет о матче, а 2-я вкладка будет содержать состав команды .

Я не могу отобразить ни одну из вкладок.

Вот что происходит при нажатии ионной карты

... 

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

...

Я обновил файл match-details.module.ts, добавив в него match-details.router.module вместо стандартного RouterModule.forChild (маршруты)

... 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { MatchDetailsPageRoutingModule } from './match-details.router.module';
import { MatchDetailsPage } from './match-details.page';

const routes: Routes = [
  {
    path: '',
    component: MatchDetailsPage
  }
];

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    MatchDetailsPageRoutingModule
    //RouterModule.forChild(routes)     
  ],
  declarations: [MatchDetailsPage]
})
export class MatchDetailsPageModule {}

...

Вот match-details.page.html - вы можете видеть, что у меня есть 2 вкладки: отчет о матче и состав команды

... 

    <ion-tab-bar>
    <ion-tab-button tab="match-report">
      <ion-label>Report</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="team-lineup">
      <ion-label>Line Up</ion-label>
    </ion-tab-button>

  </ion-tab-bar>


    <ion-content padding>
</ion-content>

...

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

сведения о совпадении / -определенный идентификатор базы данных- / отчет о совпадении

это не работает для меня, и я подозреваю, что я делаю что-то не так в моем match-details.router.module.ts - здесь это

... 

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

const routes: Routes = [
  {
    path: 'match-details/:id',
    //  path: '',
    component: MatchDetailsPage,
    children: [
      {
        path: 'match-report',
        children: [
          {
            path: '',
            loadChildren: '../match-report/match-report.module#MatchReportPageModule'
          }
        ]
      },
      {
        path: 'team-lineup',
        children: [
          {
            path: '',
            loadChildren: '../team-lineup/team-lineup.module#TeamLineupPageModule'
          }
        ]
      },
      {
        path: '',
        //redirectTo: '/match-details/match-report',
        redirectTo: '/match-details/:id/match-report',
        pathMatch: 'full'
      }
    ]
  },
   {
    path: 'match-details/:id',
    //redirectTo: '/match-details/:id',
    redirectTo: '/match-details/:id/match-report',
    pathMatch: 'full'
   }
];

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

...

Я также включил свой app-routing.module.ts, но я не думаю, что это проблема

... 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'news/:id', loadChildren: './pages/news/news.module#NewsPageModule' },
  { path: 'match-details/:id', loadChildren: './pages/match-details/match-details.module#MatchDetailsPageModule' },
  ];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

...

В настоящее время, когда я нажимаю на ионную карту, происходит то, что я вижу URL 'http://localhost:8100/match-details/-specific firebase id-', но он остается на странице со списком всех ионных карт и вообще не перемещается.

Я ожидал бы перейти на другую страницу с URL-адресом, подобным http://localhost:8100/match-details/-specific firebase id- / match-report, который бы отображал все, что есть в моем match-report.page.html

...