Ionic 4：重定向到带有id param的路由

Question

让我们说我们的英雄角7 /离子4英雄应用程序，我们有一个HeroDetailsRoutingModule与2 Tabs，SuperpowersPage和CostumePage。

现在我们要将SuperpowersPage定义为默认选项卡。

所以我尝试设置我的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

我想如果你通过：heroId到路径'超级大国'它应该工作。当你尝试这个时会发生什么......

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'
    }
];

Answer 2

我这样解决了问题

在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中设置heroIn的值

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

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

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