angular - Ionic 4: Redirect to route with id param

Question

Let's say in our hero angular 7/ionic 4 hero app we have a HeroDetailsRoutingModule with 2 Tabs, the SuperpowersPage and the CostumePage.

Now we want to define the SuperpowersPage as default tab.

So I tried to set up my 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'
    }
];

Of course that does not work because we don't have the :heroId in this module. What is the correct way to redirect in this case? I tried to do a relative path instead (e.g. redirectTo: './tabs/superpowers') but that did not work either. I have the feeling to commit some obvious mistake but I don't get it. Thanks in advance!

标签： angularionic-frameworkangular2-routingionic4

Answer 1

我以这种方式解决了问题

在 HeroDetailsRoutingModule 中将 Routes 定义为

 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}}">