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

Posted 2023-03-22

【中文标题】Ionic 4 路由到带有选项卡的视图会触发整页重新加载

【英文标题】：Ionic 4 Routing to a view with tabs triggers full page reload

【发布时间】：2019-01-25 09:59:36

【问题描述】：

我正在使用 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 

谢谢！

【问题讨论】：

能否请您提供一个工作示例。这将非常方便我们解决您的问题。

我将尝试使用最少的代码创建一个示例项目来重现问题

【参考方案1】：

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

我会将所有href 更新为routerLink。