Ошибка при создании бокового меню в ioni c 4. Ошибка: не удается сопоставить ни один маршрут - PullRequest
Новая
       40

Ошибка при создании бокового меню в ioni c 4. Ошибка: не удается сопоставить ни один маршрут

0 голосов
/ 03 марта 2020

Я новичок в Иони c. Я хочу создать боковое меню в своем приложении.

app.component.ts 

if (localStorage.getItem('userData')) {
      this.router.navigate(['/menu']);
    } else{
      this.router.navigate(['']);
    }

menu.module.ts 

const routes: Routes = [
  {
    path: 'menu',
    component: MenuPage,
    children: [
      {
        path: 'tabs',
        loadChildren: () => import('../tabs/tabs.module').then(m => m.TabsPageModule)
      },
      {
        path: 'change-password',
        loadChildren: () => import('../change-password/change-password.module').then(m => m.ChangePasswordPageModule)
      }
    ]
  },
  {
    path: '',
    redirectTo: '/menu/tabs'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [MenuPage]
})
export class MenuPageModule { }

menu.page.ts 

export class MenuPage implements OnInit {
 pages = [
    {
      title: 'Home',
      url: '/menu/tabs',
      icon: 'home'
    },
    {
      title: 'Change Password',
      url: '/menu/change-password',
      icon: 'lock'
    }
  ];
  selectPath = '';
  constructor(private router: Router) { 
    this.router.events.subscribe((event: RouterEvent) => {
      this.selectPath = event.url;
    });
  }

  ngOnInit() {
  }

}

menu.page. html

<ion-split-pane contentId="content">
  <ion-menu contentId="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content full>

      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
          <ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectPath === p.url">
            <ion-icon [name]="p.icon" class="margin"></ion-icon>
            {{p.title}}
          </ion-item>
        </ion-menu-toggle>
      </ion-list>

    </ion-content>
  </ion-menu>

  <ion-router-outlet id="content" main></ion-router-outlet>
</ion-split-pane>

app.routing.module.ts 

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

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'menu',
    loadChildren: () => import('./menu/menu.module').then( m => m.MenuPageModule)
  },
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Я получаю сообщение об ошибке:

Ошибка: ошибка (в обещании): ошибка: невозможно сопоставить маршруты. Сегмент URL: «menu / tabs»
Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: «меню / вкладки»

enter image description here

1 Ответ

0 голосов
/ 04 марта 2020

В menu.module.ts измените путь: 'menu', на путь: ''. Как вы сделали, маршрут должен быть меню / меню / вкладки. Если вы измените его на '', он будет иметь ожидаемое поведение: меню / вкладки. 

path: '',
component: MenuPage,
...