Ionic 4:重定向到带有id参数的路由

Question

假设在我们的英雄angular 7/ionic 4英雄应用程序中，我们有一个带有两个标签的HeroDetailsRoutingModule，即SuperpowersPage和CostumePage。

现在，我们希望将SuperpowersPage定义为default选项卡。

所以我试着设置我的HeroDetailsRoutingModule：

const routes: Routes = [
    {
        path: 'tabs/',
        component: HeroDetailsPage,
        children: [
            {
                path: 'superpowers',
                loadChildren: './superpowers/superpowers.module#SuperpowersPageModule'
            },
            {
                path: 'costume',
                loadChildren: './costume/costume.module#CostumePage'
            },
            {
                path: '',
                redirectTo: '/heroes/:heroId/tabs/superpowers',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/heroes/:heroId/tabs',
        pathMatch: 'full'
    }
];

当然，这不起作用，因为我们在此模块中没有:heroId。在这种情况下，重定向的正确方式是什么？我尝试使用相对路径(例如redirectTo: './tabs/superpowers')，但也不起作用。我有感觉犯了一些明显的错误，但我不明白。提前感谢！

Answer 1

我用这种方法解决了这个问题

在HeroDetailsRoutingModule中将路由定义为

 const routes: Routes = [
    {
        path: 'tabs',
        component: HeroDetailsPage,
        children: [
            {
                path: 'superpowers',
                children:[
                 { path : ':heroId',
                  loadChildren: './superpowers/superpowers.module#SuperpowersPageModule'
                 }
                ]
            },
            {
                path: 'costume',
                loadChildren: './costume/costume.module#CostumePage'
            }
        ]
    },
    {
        path: '',
        redirectTo: 'tabs/superpowers',
        pathMatch: 'full'
    }
];

在hero-details.page.ts中设置heroId的值

heroId =  <value>// get the value of heroId 

然后在hero-details.page.html文件访问选项卡中

<ion-tab-button tab="superpowers/{{heroId}}">

Answer 2

我认为如果你通过:希罗德到路径‘超能力’，它应该可以工作。当你尝试这个的时候会发生什么.

const routes: Routes = [
    {
        path: 'tabs/',
        component: HeroDetailsPage,
        children: [
            {
                path: 'superpowers/:heroId',
                loadChildren: './superpowers/superpowers.module#SuperpowersPageModule'
            },
            {
                path: 'costume',
                loadChildren: './costume/costume.module#CostumePage'
            },
            {
                path: '',
                redirectTo: '/heroes/:heroId/tabs/superpowers',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/heroes/:heroId/tabs',
        pathMatch: 'full'
    }
];