Question

我已经使用了离子菜单模板，我根据自己对app的需求进行了更改，当我从登录或注册页面登录应用程序时，我的主页上定义了menuToggle按钮，但是当我在无法看到菜单按钮。

我的主页代码：

<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");
}

现在，当我只加载主页时，我可以看到我的菜单按钮，但是当我从登录页面菜单导航时消失了。

Answer 1

我通过将ion-navbar更改为ion-toolbar

解决了问题

<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 app中注册

Answer 2

这让我疯狂，但我发现的事情是将菜单代码添加到与你所在页面相同的页面。（好吧，到目前为止）。我相信我的项目将来会超越这个。

例如：

<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。

从loginPage登录时，menuToggle按钮隐藏

2 个答案: