تايبسكريبت - كيف يمكنني جعل القوائم معروضة بشكل صحيح عند التنقل بين الصفحات

التطبيق الذي أطورُه له هذا الهيكل: هناك صفحتان رئيسيتان، ولكل واحدة منهما قائمة جانبية مختلفة.

عند الوصول إلى الصفحة الأولى، يتم عرض القائمة اليمنى. عند الانتقال إلى الصفحة الثانية من الصفحة الأولى، يتم عرض القائمة اليمنى أيضًا. ستحدث المشكلة عند محاولة العودة إلى الصفحة الأولى مرة أخرى. يتم إخفاء القائمة الثانية بشكل صحيح، لكن القائمة من الصفحة الأولى لا يتم عرضها أبدًا.

هذا مستودع صغير لعرض المشكلة: https://github.com/iamkinetic/ionic4-multiple-menus-bug

يبدو أن كل إصدار من إيونيك (من 4.6 إلى 4.10) يعاني من هذه المشكلة وحتى تفعيل القائمة يدويًا لا يحل المشكلة بالكامل. هل أفعل شيئًا خاطئًا؟ هل هناك طريقة أفضل للقيام بذلك؟

الإجابة رقم 1

لقد واجهت نفس المشكلة بالضبط. لقد أنشأت مكون Angular جديد يسمى menu وأدخلته فقط في جميع المكونات التي كانت بحاجة إليه. يحدث هذا لأن ionicMenu لا يُشار إليه مرة أخرى عند العودة. لا يمكنك استخدام ionic cli هنا. قد تحتاج إلى حلها يدويًا. سأقوم بالتعديل مرة أخرى إذا وجدت الكود وأضعه هنا.

تحديث: هذه هي الخطوات.

1. أنشئ مكون صفحة أيوني يسمى menu باستخدام ionic-cli
2. ضع هذا في HTML الخاص به

<ion-header>
  <ion-toolbar [color]="currentColor">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      My App
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-menu contentId="child-content" side="start" menuId="custom" class="my-custom-menu" type="overlay">
  <ion-header>
    <ion-toolbar [color]="currentColor">
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list (click) = "closeMenu()">
      <ion-item routerLink="/dashboard/home" closeMenu>Home</ion-item>
      <ion-item routerLink="/dashboard/myorder" menuClose>My Order</ion-item>
      <ion-item routerLink="/dashboard/aboutus" menuClose>About us</ion-item>
      <ion-item routerLink="/dashboard/contactus" menuClose>Contact us</ion-item>
      <ion-item routerLink="/dashboard/feedback" menuClose>Feedback</ion-item>
      <ion-item (click) = "logout()">Log Out</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-content overflow-scroll="true">
  <ion-router-outlet id="child-content"></ion-router-outlet>
</ion-content>

3. انسخ كل المسارات التي تريد أن يكون لها مكون القائمة من app-routing.module.ts والصقها في menu.module.ts كما يلي

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

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

import { MenuPage } from './dashboard.page';

const routes: Routes = [
  {
    path: '',
    component: MenuPage,
    children: [
      {
        path: '', redirectTo: 'home', pathMatch: 'full'
      },
      { path: 'schedule', loadChildren: '../schedule/schedule.module#SchedulePageModule' },
      { path: 'orderstatus/:id', loadChildren: '../orderstatus/orderstatus.module#OrderstatusPageModule' },
      { path: 'payment', loadChildren: '../payment/payment.module#PaymentPageModule' },
      { path: 'aboutus', loadChildren: '../aboutus/aboutus.module#AboutusPageModule' },
      { path: 'contactus', loadChildren: '../contactus/contactus.module#ContactusPageModule' },
      { path: 'howitworks', loadChildren: '../howitworks/howitworks.module#HowitworksPageModule' },
      { path: 'myorder', loadChildren: '../myorder/myorder.module#MyorderPageModule' },
      { path: 'orderdetails/:id', loadChildren: '../orderdetails/orderdetails.module#OrderdetailsPageModule' },
      { path: 'feedback', loadChildren: '../feedback/feedback.module#FeedbackPageModule' },
      { path: 'home', loadChildren: '../home/home.module#HomePageModule' },
    ]
  },
];

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

4. يجب أن يكون لديك الآن قائمة مشتركة لجميع المسارات تحت صفحة القائمة. ويجب أن تكون قادرًا على الوصول إليها على شكل /menu/somepage. إذا كنت لا تحب menu في المسار، فغيّره إلى شيء مثل dashboard أو أي شيء في app-routing.module.ts