Ionic 4 Маршрутизация к представлению с вкладками вызывает полную перезагрузку страницы - PullRequest
Новая
       10

Ionic 4 Маршрутизация к представлению с вкладками вызывает полную перезагрузку страницы

0 голосов
/ 25 января 2019

Я разрабатываю приложение Ionic 4.0.0 для Angular 7 и пытаюсь совместить боковое меню с вкладками на дополнительной странице. Посмотрим, как это работает:

  • Боковое меню слева от разделенной панели, а затем справа, у меня есть простой вид со списком.
  • При нажатии на элемент в списке он переходит на страницу, где у меня есть 4 вкладки для отображения некоторых данных, связанных с этим элементом.

Я сталкиваюсь с двумя основными проблемами:

  • При перетаскивании назад ничего не происходит. Я переместил меню в правую часть экрана, чтобы убедиться, что события не конфликтуют.
  • При нажатии элемента в начальном списке и маршрутизации на вторую страницу с вкладками запускается полная перезагрузка страницы. Это на самом деле самая раздражающая часть. Боюсь, что-то не так с угловым роутером.

В основном на основном модуле маршрутизации я проверяю аутентификацию и показываю страницу входа в систему, если пользователь не аутентифицирован, и защищаю суб-маршруты. Я опускаю этот код для простоты.

Затем у меня есть /app/AppRoutingModule, который загружает все защищенные маршруты и выглядит следующим образом (без некоторых строк): 

const routes: Routes = [
    {...},
    {
        path: 'communities',
        loadChildren: './communities/communities-routing.module#CommunitiesRoutingModule',
    },
    {...}
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

При достижении пути / приложения / сообщества загружается модуль суб-маршрутизации CommunitiesRoutingModule, который выглядит примерно так: 

const routes: Routes = [
    {path: '', loadChildren: './communities.module#CommunitiesPageModule'}, // Page with a list of all communities.
    {path: 'view/:id', loadChildren: './view-community/tabs/tabs.module#TabsPageModule'}, //Loads the tabs page module
    {...} //Loads other sub-tabs.
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class CommunitiesRoutingModule {
}

И, наконец, загружаемый модуль TabsPageModule импортирует TabsCommuniitiesRoutingModule

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        TabsCommunitiesRoutingModule
    ],
    declarations: [TabsPage]
})
export class TabsPageModule {
}

И TabsCommunitiesRoutingModule

const routes: Routes = [
    {
        path: '',
        component: TabsPage,
        children: [
            {
                path: 'info',
                children: [{
                    path: '',
                    loadChildren: '../tab1-info/tab1-info.module#Tab1InfoPageModule'
                }]
            },
            {
                path: 'minutes',
                children: [
                    {
                        path: '',
                        loadChildren: '../tab2-minutes/tab2-minutes.module#Tab2MinutesPageModule'
                    },

                ]
            },
            {
                path: 'apartments',
                children: [{
                    path: '',
                    loadChildren: '../tab3-apartments/tab3-apartments.module#Tab3ApartmentsPageModule'
                }]
            },
            {
                path: 'tasks',
                children: [{
                    path: '',
                    loadChildren: '../tab4-tasks/tab4-tasks.module#Tab4TasksPageModule'
                }]
            }
        ],
    },

];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class TabsCommunitiesRoutingModule {
}

Спасибо!

1 Ответ

0 голосов
/ 29 января 2019

Только что удалось решить проблему.Я звонил по маршруту, используя href='/my/tabs/page/', и это вызвало полную перезагрузку страницы.Из документов я видел, что это должно быть сделано с помощью [routerLink]="['/my/tabs/page']".

Я обновлю все href до routerLink.

...