angular - Enrutamiento de Ionic 4 a una vista con pestañas provoca recarga completa de la página

Estoy desarrollando una aplicación Ionic 4.0.0 con Angular 7 y estoy tratando de combinar el menú lateral con pestañas en una página secundaria. Veamos cómo funciona:

• Menú lateral a la izquierda del panel dividido y luego a la derecha tengo una vista simple con una lista.
• Al hacer clic en un elemento de la lista, navega a una página donde tengo 4 pestañas para mostrar algunos datos relacionados con ese elemento.

Estoy enfrentando dos problemas principales:

• Cuando arrastro hacia atrás no hace nada. Moví el menú a la parte derecha de la pantalla solo para probar que los eventos no estén en conflicto.
• Al hacer clic en el elemento de la lista inicial y navegar a la segunda página con las pestañas, se desencadena una recarga completa de la página. Esa es en realidad la parte más molesta. Me temo que estoy haciendo algo mal con el enrutador de Angular.

Básicamente, en el módulo principal de enrutamiento verifico la autenticación y muestro la página de inicio de sesión si el usuario no está autenticado y protejo las subrutas. Estoy omitiendo este código por simplicidad.

Luego, tengo el /app/AppRoutingModule que carga todas las rutas protegidas y se ve así (omitiendo algunas líneas):

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

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

Al acceder a la ruta /app/communities, se carga el submódulo de enrutamiento CommunitiesRoutingModule y se ve algo así:

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 {
}

Y finalmente, el TabsPageModule que se carga importa el TabsCommuniitiesRoutingModule

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

Y el 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 {
}

¡Gracias!

Respuesta #1

Acabo de lograr resolver el problema. Estaba llamando a la ruta usando href='/my/tabs/page/', y esto provocaba la recarga completa de la página. Por la documentación que he visto, debería hacerse usando [routerLink]="['/my/tabs/page']".

Actualizaré todos los href a routerLink.