我正在尝试在离子应用程序中添加侧面菜单,但它没有出现,我正在附加所有文件,请帮助我!!
app.html 文件
<ion-menu [content]="mycontent">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item (click)=o nLoad(ServicesMessPage)>
<ion-icon name="quote" item-left></ion-icon>
Mess
</button>
<button ion-item (click)=o nLoad(ServicesLaundryPage)>
<ion-icon name="quote" item-left></ion-icon>
Laundry
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #mycontent></ion-nav>
然后在 app.component.ts 中我添加了所有必要的导入
app.component.ts 文件
import { Component, ViewChild } from '@angular/core';
import { Platform, NavController, MenuController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage } from '../pages/login/login';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage: any = LoginPage;
@ViewChild('mycontent') nav: NavController
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private menuCtrl: MenuController) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
onLoad(page: any) {
this.nav.setRoot(page);
this.menuCtrl.close();
}
}
在 ServicesPage html 中我包含了菜单
服务.html
<ion-header>
<ion-navbar hideBackButton="true">
<ion-buttons start>
<button ion-button name="menu" menuToggle>
</button>
</ion-buttons>
<ion-title>Dashboard</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
对于任何通用 *.html 文件来显示 ion-menu,需要确保 4 件事:
给定代码,通过单击菜单按钮独立显示侧菜单。
<ion-menu contentId="mainContent">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<!-- write your menu content here-->
</ion-menu>
<div class="ion-page" id = "mainContent" main>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<!-- write your app content here-->
</div>
注意: 使用 ion-menu-button 是切换菜单屏幕的方法之一。您还可以使用 menuController 来更改菜单栏,如此处
所述我正在我的项目上测试你的代码,它运行良好,我唯一注意到的是你缺少按钮中的图标菜单
更改此行
<button ion-button name="menu" menuToggle> </button>
services.html 中的这个
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
使用此行,菜单图标将出现。
首先你犯了
app.html
的错误,这可能是你的打字错误。现在我重构你的代码如下:
<ion-menu [content]="mycontent">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item (click)=onLoad(ServicesMessPage)>
<ion-icon name="quote" item-left></ion-icon>
Mess
</button>
<button ion-item (click)=onLoad(ServicesLaundryPage)>
<ion-icon name="quote" item-left></ion-icon>
Laundry
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #mycontent></ion-nav>
还需要改变
services.html
<ion-navbar hideBackButton="true">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Dashboard</ion-title>
</ion-navbar>
不要忘记将
main
添加到您的 ion-router-outlet
。它应该看起来像:
<ion-router-outlet main></ion-router-outlet>
出于某种原因,Ionic 7 要求 ion-menu 组件上的 contentId 属性和 ion-router-outlet 组件上的 id 属性具有相同的值。这对我来说就像黄金一样。
<ion-menu contentId=“main-content">
<ion-header>
<ion-toolbar>
<ion-title>Menu Name</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
app.html