Ionic 4: Перенаправление на маршрут с идентификатором param - PullRequest
Новая
       30

Ionic 4: Перенаправление на маршрут с идентификатором param

0 голосов
/ 24 марта 2019

Допустим, в нашем приложении для героя angular 7 / ionic 4 hero у нас есть HeroDetailsRoutingModule с 2 вкладками, 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'), но это тоже не сработало.У меня есть чувство совершить очевидную ошибку, но я ее не понимаю.Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 13 мая 2019

Я решил проблему таким образом

В 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}}">
0 голосов
/ 24 марта 2019

Я думаю, что если вы передадите: heroId к пути 'superpowers', оно должно работать.Что происходит, когда вы пытаетесь это ... 

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