Question

我在一个页面上显示包含游戏比分和赛程的离子卡列表。

当我单击离子卡时，我想要进入一个新页面，该页面显示特定于该灯具的更多详细信息（从Firebase中读取）-我可以做到这一点。

当我尝试增加一些复杂性时会出现我的问题-在这个具体的详细信息页面上，我想介绍2个标签-1个标签（默认标签）包含比赛报告，第二个标签包含团队

我似乎无法显示任何标签。

点击离子卡会发生什么事

...

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

...

我更新了match-details.module.ts，使其包含match-details.router.module，而不是使用标准的RouterModule.forChild（routes）

...

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>

...

我期望的是，当我单击固定装置的离子卡时，将带到一个页面，该页面默认为“匹配报告”选项卡，而网址将是这样的

match-tails / specific firebase id // match-report

它对我不起作用，我怀疑我在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-”，但其停留在列出所有离子卡且根本不导航的页面上。 / p>

我希望使用http://localhost:8100/match-details/-specific firebase id- / match-report这样的网址导航到其他页面，该页面将显示我match-report.page.html

上的内容

导航到包含选项卡的特定详细信息页面

0 个答案: