[英]How can I make the menus being displayed correctly when navigating between pages
The application I'm developing has this structure: there's two main pages with each a different side menu.我正在开发的应用程序具有这种结构:有两个主页面,每个页面都有不同的侧菜单。
When accessing the first page, the right menu is being displayed.访问第一页时,将显示右侧菜单。 When accessing the second page from the first page, the right menu is also being displayed.从第一页访问第二页时,也会显示右侧菜单。 The problem will occurred when trying to go the the first page again.再次尝试 go 第一页时会出现该问题。 The second menu is correctly hidden, but the menu from the first page is never displayed.第二个菜单被正确隐藏,但第一页的菜单永远不会显示。
This is small repo to show the problem: https://github.com/iamkinetic/ionic4-multiple-menus-bug这是显示问题的小仓库:https://github.com/iamkinetic/ionic4-multiple-menus-bug
Every version of Ionic (from 4.6 to 4.10) seems to have this issue and even manually enabling the menu doesn't fully fix the issue. Ionic 的每个版本(从 4.6 到 4.10)似乎都有这个问题,甚至手动启用菜单也不能完全解决这个问题。 Am I doing something wrong?难道我做错了什么? Is there a better way to do this?有一个更好的方法吗?
I had the exact same problem.我有同样的问题。 I just made a new angular component called menu and just introduced it into all the components that needed it.我刚刚制作了一个名为 menu 的新 angular 组件,并将其引入到所有需要它的组件中。 This happens because the ionicMenu is not referenced again when you go back.发生这种情况是因为当您返回 go 时,没有再次引用 ionicMenu。 You cannot use ionic cli here.您不能在此处使用 ionic cli。 You may have to manually work it out.您可能必须手动解决。 I will edit again if I find the code and put it here.如果我找到代码并将其放在这里,我将再次编辑。
UPDATE : Here's the steps.更新:这是步骤。
menu
using ionic-cli使用 ionic-cli 制作一个名为menu
的离子页面组件<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>
app-routing.module.ts
and paste them into menu.module.ts
like从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 { }
/menu/somepage
if you don't like the menu
in the path, change it to somethinglike dashboard
or something in app-routing.module.ts
如果您不喜欢路径中的menu
,应该能够以/menu/somepage
的形式访问它们,将其更改为dashboard
之类的东西或app-routing.module.ts
中的东西
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.