I want to outsource my navigation in a layout component.
I have done all that so far. For testing I created two pages, Home and Contact.
When I load the application, everything is displayed correctly. If I now click on the navigation point Contact, the page changes as expected. If I click on the Home menu item again, the page changes, but the navigation on the left side disappears forever.
I hope you can help me
Here the structure of the different files. I also attach a picture of the folder structure
app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import {MainLayoutWithSideNavComponent} from './layout/main-layout-with-side-nav/main-layout-with-side-nav.component';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full',
canActivate: [],
},
{
path: 'home',
component: MainLayoutWithSideNavComponent,
canActivate: [],
loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
},
{
path: 'contact',
component: MainLayoutWithSideNavComponent,
canActivate: [],
loadChildren: () => import('./pages/contact/contact.module').then(m => m.ContactPageModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
main-layout-with-side-nav.component.html
<ion-split-pane contentId="main-content">
<ion-menu content-id="main-content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Navigate
</ion-list-header>
<ion-menu-toggle auto-hide="false">
<ion-item *ngFor="let nav of navi" button [routerLink]="'/'+ nav.link">
<ion-icon slot="start"></ion-icon>
<ion-label>
{{nav.linkName}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<!-- <ion-title>Header</ion-title>-->
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-router-outlet></ion-router-outlet>
</ion-content>
</div>
</ion-split-pane>
app.component.html
<ion-app>
<ion-router-outlet animated="false"></ion-router-outlet>
</ion-app>