Ionic 4路由到带有选项卡的视图会触发整页重新加载

Question

我正在使用 Angular 7 开发一个 Ionic 4.0.0 应用程序，我正在尝试将侧边菜单与辅助页面上的选项卡结合起来。让我们看看它是如何工作的：

侧边菜单在拆分窗格的左侧，然后在右侧我有一个带有列表的简单视图。
单击列表中的项目时，它会导航到一个页面，我在该页面上有 4 个选项卡来显示与该项目相关的一些数据。

我面临两个主要问题：

往回拖时什么都不做。我将菜单移动到屏幕的右侧只是为了尝试事件不冲突。
当单击初始列表中的项目并路由到带有选项卡的第二页时，会触发整页重新加载。这实际上是最烦人的部分。恐怕我在 angular 路由器上做错了。

基本上在主路由模块上，我检查身份验证并在用户未通过身份验证时显示登录页面并保护子路由。为了简单起见，我省略了这段代码。

然后，我有 /app/AppRoutingModule 加载所有受保护的路由，看起来像这样（省略一些行）：

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

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

到达路径 /app/communities 时，子路由模块 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 {
}

谢谢！

Answer 1

刚刚设法解决了问题。我正在使用 href='/my/tabs/page/' 调用路由，这触发了整个页面的重新加载。从文档中我看到应该使用 [routerLink]="['/my/tabs/page']".

来完成

我会将所有 href 更新为 routerLink。

Ionic 4路由到带有选项卡的视图会触发整页重新加载

Ionic 4 Routing to a view with tabs triggers full page reload

typescript

angular-routing

angular

ionic4