未捕获（承诺）：错误：无法匹配任何路由。 URL 段：'tabs/tab1/discover/a1'

Question

谁能帮我解决这个问题？我觉得我的选项卡路由页面设置不正确，但每当我尝试修复它时，它只会破坏更多。

我创建了一个离子角度标签应用程序。我有本地存储的数据，这些数据显示在“发现”页面上的卡片显示中。点击一张卡片后，我想被带到该卡片主页，但我得到了下面显示的错误。

App-routing.module.ts:

const routes: Routes = [
  { path: '', redirectTo: 'places', pathMatch: 'full' },
  { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthPageModule) },
  {
    path: 'places',
    loadChildren: () => import('./places/places.module').then(m => m.PlacesPageModule),
    canLoad: [AuthGuard]
  },
  {
    path: 'bookings',
    loadChildren: () => import('./bookings/bookings.module').then(m => m.BookingsPageModule),
    canLoad: [AuthGuard]
  }
];

tabs-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: ':artistId',
        loadChildren: () => import('../tab1/discover/artist-details/artist-details.module').then(m => m.ArtistDetailsPageModule)
      },
      {
        path: ':venueId',
        loadChildren: () => import('../tab1/discover/venue-details/venue-details.module').then(m => m.VenueDetailsPageModule)
      }
    ]
  },

发现.page.html：

<ion-content class="ion-padding">
  <ion-grid>
    <ion-row>
      <ion-col size="12" size-sm="8" offset-sm="2">
        <ion-card
          fill="clear"
          [routerLink]="['/','tabs','tab1','discover',loadedArtist[0].id]"
        >
          <ion-card-header>
            <ion-card-title>{{ loadedArtist[0].name }}</ion-card-title>
            <ion-card-subtitle
              >{{ loadedArtist[0].cost | currency }} / Night</ion-card-subtitle
            >
          </ion-card-header>
          <ion-img [src]="loadedArtist[0].imageUrl"></ion-img>
          <ion-card-content>
            <p>Rating: {{ loadedArtist[0].rating | percent}}</p>
            <p>Genre: {{ loadedArtist[0].genre }}</p>
            <p>Equipment: {{ loadedArtist[0].equipment }}</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12" size-sm="8" offset-sm="2">
        <ion-card
          *ngFor="let artist of loadedArtist.slice(1)"
          fill="clear"
          [routerLink]="['/','tabs','tab1','discover',artist.id]"
        >
          <ion-card-header>
            <ion-card-title>{{ artist.name }}</ion-card-title>
            <ion-card-subtitle
              >{{ artist.cost | currency }} / Night</ion-card-subtitle
            >
          </ion-card-header>
          <ion-img [src]="artist.imageUrl"></ion-img>
          <ion-card-content>
            <p>Rating: {{ artist.rating | percent}}</p>
            <p>Genre: {{ artist.genre }}</p>
            <p>Equipment: {{ artist.equipment }}</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row></ion-row>
  </ion-grid>
</ion-content>

Answer 1

路由路径需要正确构建。尝试改变：

      {
        path: ':artistId',
        loadChildren: () => import('../tab1/discover/artist-details/artist-details.module').then(m => m.ArtistDetailsPageModule)
      },

到

      {
        path: 'discover/:artistId',
        loadChildren: () => import('../tab1/discover/artist-details/artist-details.module').then(m => m.ArtistDetailsPageModule)
      },