Ionic 5 ion-split-pane when selecting a side panel link the view renders the component and after that all the links do not work

Here is the problem on my app in detail. When I click the “Procedure” link

image309×618 20.7 KB

The procedure component loads the view

image309×618 48.6 KB

If I try to go back to another the create component by clicking the “Create” link in the side panel it no longer works.

image309×618 26.3 KB

I must refresh the browser for the “Create” link to work.

image309×618 25.7 KB

image309×618 26 KB

Here are my files:
I have a component called side-menu.
side-menu.component.html

<ion-split-pane contentId="menu-content">
  <ion-menu id="side-menu" contentId="menu-content" menuId="side-menu-create" type="overlay">

    <ion-toolbar id="menu-header">

      <ion-img [src]="'/assets/images/augmentorLogo.svg'"></ion-img>
    </ion-toolbar>

    <ion-content>

      <ion-list lines="none">

        <ion-menu-toggle autoHide="false" menu="side-menu-create" *ngFor="let menuItem of menuItems">

          <ion-item [routerLink]=menuItem.url routerDirection="root" routerLinkActive="active-link">
            <ion-icon class="ion-padding-end" color="primary" [name]="menuItem.icon"></ion-icon>
            <ion-label color="primary">{{ menuItem.title }}</ion-label>
          </ion-item>

        </ion-menu-toggle>

      </ion-list>
    </ion-content>

    <ion-footer class="ion-no-border ion-padding-bottom">
      <ion-item href="/" routerDirection="root" routerLinkActive="active-link">
        <ion-icon class="ion-padding-end" color="primary" name="log-out-outline"></ion-icon>
        <ion-label color="primary"> Sign Out</ion-label>

      </ion-item>
    </ion-footer>

  </ion-menu>

  <ion-router-outlet id="menu-content"></ion-router-outlet>

</ion-split-pane>

side-menu.component.ts

import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.scss'],
})
export class SideMenuComponent implements OnInit {
  menuItems = [
    { title: 'Create', url: 'create-page', icon: 'add' },
    { title: 'Procedure', url: 'procedures', icon: 'create-outline' },
    { title: 'ClassroomAR', url: 'classroomAR', icon: 'school-outline' },
    { title: 'Contacts', url: 'contacts', icon: 'person-add-outline' }
  ];

  constructor() {
  }

  ngOnInit() { }

}

I have a side-menu page that loads the side-menu.component

<app-side-menu></app-side-menu>

Side-menu-page.module.ts import this side-menu.component using ComponentsModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { SideMenuPagePageRoutingModule } from './side-menu-page-routing.module';

import { SideMenuPagePage } from './side-menu-page.page';
import { ComponentsModule } from 'src/app/components/components.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    SideMenuPagePageRoutingModule,
    ComponentsModule
  ],
  declarations: [SideMenuPagePage]
})
export class SideMenuPagePageModule {}

side-menu-page-routing.module has the following routes to load each component selected in the side menu

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SideMenuPagePage } from './side-menu-page.page';

const routes: Routes = [
  {
    path: '',
    component: SideMenuPagePage,
    children: [
      {
        path: 'create-page',
        loadChildren: () => import('../create-page/create-page.module').then(m => m.CreatePagePageModule),
      },
      {
        path: 'procedures',
        loadChildren: () => import('../../procedure-list/procedure-list.module').then(m => m.ProcedureListPageModule)
      }
    ]
  }
];

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

1 post - 1 participant

Read full topic