Tengo dos enrutadores de iones anidados. La razón por la que uso dos salidas de enrutador es que todas las páginas, excepto la página de inicio de sesión, tienen un menú lateral y un encabezado en mi aplicación.

aplicación.componente.html

 <ion-app> <ion-router-outlet></ion-router-outlet> </ion-app>

app.routing.module.ts

 ... { path: 'login', loadChildren: () => import('./pages/login/login.module').then((m) => m.LoginPageModule), canActivate: [IsLoggedGuard], }, { path: 'home', loadChildren: () => import('./pages/home/home.module').then((m) => m.HomePageModule), canActivate: [AuthGuard] }, ...

home.routing.module.ts

 ... const routes: Routes = [ { path: '', component: HomePage, children: [ { path: 'listall', component: ListAllComponent, }, { path: 'create', component: CreateComponent, }, ], }, ]; ...

inicio.pagina.html

 <ion-menu> ... </ion-menu> <ion-header [translucent]="true" mode="ios"> <ion-toolbar> <ion-menu-button slot="start" mode="md"></ion-menu-button> </ion-toolbar> </ion-header> <ion-router-outlet id="main"></ion-router-outlet>

El problema es que el encabezado se superpone al componente que viene con la salida del enrutador. Entonces, si no agrego margin-top al componente llamado, no puedo ver el contenido anterior. Creo que esta no es la solución correcta, estoy haciendo algo mal. ¿Dónde estoy haciendo mal? imagen