我使用了ionic的菜单模板,我根据应用程序的需要以及当我从登录或注册页面登录应用程序到定义菜单切换按钮的主页时对其进行更改,但是当我无法看到菜单按钮时。
我的主页代码:
<ion-header>
<ion-navbar hideBackButton="true">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Dashboard</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
Hello
</ion-content>
我的登录页面:
<ion-header>
<ion-navbar hideBackButton="true">
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div ion-fixed class="login_wrapper">
<div class="logo">
<img src="./assets/images/logo.png" />
</div>
<div class="login_content">
<form #submitForm="ngForm">
<ion-list ngFormModel="LoginForm">
<ion-item class="logintext">
<ion-label class="login_label" stacked>Username</ion-label>
<ion-input class="login_input" type="email" name="username" [(ngModel)]="uname"></ion-input>
</ion-item>
<ion-item class="logintext">
<ion-label class="login_label" stacked>Password</ion-label>
<ion-input class="login_input" type="password" name="email" [(ngModel)]="password"></ion-input>
</ion-item>
<div class="submitbtn">
<button ion-button type="submit" class="sbtbtn" (click)="signIn($event)" color="light" full> SignIn </button>
</div>
</ion-list>
</form>
<div class="submitbtn">
<button ion-button type="submit" class="sbtbtn" (tap)="openRegister()" color="light" full> SignUp </button>
</div>
</div>
</div>
</ion-content>
我只是用来加载我的主页
signIn(e) {
console.log("SignIn Btn Clicked");
this.navCtrl.push("Home");
}
现在,当我只加载主页时,我可以看到我的菜单按钮,但是当我从登录页面导航时,菜单消失了。
我通过将离子导航栏更改为离子工具栏解决了它
<ion-header>
<ion-toolbar hideBackButton="true">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Dashboard</ion-title>
</ion-toolbar>
现在,在ionic2 ios应用程序中登录和注册后,我可以在主页上看到菜单
这也让我发疯,但我发现要做的事情是将菜单代码添加到与您所在的页面相同的页面。(好吧,到目前为止(。我相信我的项目将来会超越这一点。
例如:
<ion-header>
<ion-navbar>
<ion-buttons left>
<button ion-button menuToggle>
<ion-icon name="menu" ></ion-icon>
</button>
</ion-buttons>
<ion-title><img alt="logo" height="40" src="./assets/images/logo.png" ></ion-title>
<ion-buttons right >
<button (click)="openModal()" icon-only>
<ion-icon name="headset" ></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-menu [content]="content" persistent="true" type="overlay">
<ion-header>
<ion-toolbar>
<ion-title>
Menu
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-list>
<ion-item (click)="gotohome()">
Home
</ion-item>
<ion-item (click)="ChangeLanguagePageclick()">
Set Language
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="TabsPage" #content></ion-nav>
<ion-content >
Normal contents
</ion-content>
在此页面中,TabsPage是我的根文档,因此您必须对其进行调整。
经过多次尝试,我还对其进行了更新,以便它也可以在iOS中使用。