typescript - 在页面之间导航时如何使菜单正确显示
问题描述
我正在开发的应用程序具有这种结构:有两个主页面,每个页面都有不同的侧菜单。
访问第一页时,将显示右侧菜单。从第一页访问第二页时,也会显示右侧菜单。再次尝试转到第一页时会出现问题。第二个菜单被正确隐藏,但第一页的菜单永远不会显示。
这是显示问题的小仓库: https ://github.com/iamkinetic/ionic4-multiple-menus-bug
Ionic 的每个版本(从 4.6 到 4.10)似乎都有这个问题,甚至手动启用菜单也不能完全解决这个问题。难道我做错了什么?有一个更好的方法吗?
解决方案
我有同样的问题。我刚刚制作了一个名为 menu 的新 Angular 组件,并将它引入到所有需要它的组件中。发生这种情况是因为返回时没有再次引用 ionicMenu。您不能在此处使用 ionic cli。您可能需要手动解决。如果我找到代码并将其放在这里,我将再次编辑。
更新:这是步骤。
menu
使用 ionic-cli创建一个离子页面组件- 把它扔进它的 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>
- 复制您想要菜单组件的所有路线
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
好像您不喜欢menu
路径中的一样,将其更改为类似的东西dashboard
或app-routing.module.ts
推荐阅读
- ios - 每次我在 Xcode for iOS 中构建 Unity 应用程序时,它都会创建一个新图标
- c# - Unity中X轴超过90度和-90度的旋转问题
- javascript - 列表 JS 中的 JSON
- sql - Spark count 分组中的单词数
- html - 如何创建右对齐的注销按钮?
- python - 从 df 中查找最大值和最小值,以及相应的列名和行名
- javascript - 加载不显示表单上传的图像
- python - Pandas 版本的“如果为真,此处为 VLOOKUP,如果为假,则在其他地方为 VLOOKUP
- python - 在 Django 上找不到页面 - 空路径
- .net - .NET IL / MSIL 评估堆栈基础