Ionic 4路由到带有标签的视图会触发整页重新加载

Question

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

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

我面临两个主要问题：

• 向后拖动时，它不会执行任何操作。我将菜单移至creen的右侧，以尝试避免事件冲突。
• 单击初始列表中的项目并使用选项卡路由到第二页时，将触发整页重新加载。这实际上是最烦人的部分。恐怕我在角度路由器上做错了什么。

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

然后，我将/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。