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

Question

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

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

我面临两个主要问题:

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

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

然后，我有加载所有 protected 路由的 /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 导入 TabsCommunitiesRoutingModule

@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。