首页 > 解决方案 > 登录侧菜单不显示

问题描述

我最近开始学习 Ionic 3 和 Angular 并遇到了一些问题。我想使用conference templateIonic 提供的实现登录表单,但无论我做什么,登录页面都不会显示。单击模板的侧边菜单可以找到登录页面。

这是我的旧 HTML 模板:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Login</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="logo">
    <img src="assets/img/appicon.svg" alt="Ionic logo">
  </div>

  <form #loginForm="ngForm" novalidate>
    <ion-list>
      <ion-item>
        <ion-label stacked color="primary">Email</ion-label>
        <ion-input [(ngModel)]="login.email" name="email" type="email" #email="ngModel" spellcheck="false"
                   autocapitalize="off"
                   placeholder="Your email" required>
        </ion-input>
      </ion-item>
      <p ion-text [hidden]="email.valid || submitted == false" color="danger" padding-left>
        Email is required
      </p>

      <ion-item>
        <ion-label stacked color="primary">Password</ion-label>
        <ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" placeholder="Your password" required>
        </ion-input>
      </ion-item>
      <p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
        Password is required
      </p>
    </ion-list>

    <p padding class="text-ios-danger">
      {{loginError}}
    </p>

    <ion-row responsive-sm>
      <ion-col>
        <button ion-button (click)="onLogin(loginForm)" type="submit" block>Login</button>
      </ion-col>
      <ion-col>
        <button ion-button (click)="onSignup()" color="light" block>Signup</button>
      </ion-col>
    </ion-row>
  </form>

</ion-content>

这是我的新的:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Login</ion-title>
  </ion-navbar>
</ion-header>

   <ion-content>
            <div class="top">
                <img src="assets/logo.png" >
              </div>
              <!-- Social Login Buttons -->
              <div class="bottom">
                <div class="form" *ngIf="mode == 'main'">
                  <div>
                     <form [formGroup]="emailPasswordForm">
                      <ion-list>
                        <ion-item no-lines>
                          <ion-input type="email" formControlName="email" placeholder="Email Address"></ion-input>
                        </ion-item>
                        <ion-item no-lines>
                          <ion-input type="password" formControlName="password" placeholder="Create Password"></ion-input>
                        </ion-item>
                        <button ion-button icon-left class="dark" tappable (click)="login()" [disabled]="!emailPasswordForm.valid">LOGIN</button>
                      </ion-list>
                    </form>
               </div>
            </div>
     </div>
    </ion-content>

我将不胜感激任何建议,谢谢。

标签: angularfirebaseionic-frameworkionic3

解决方案


推荐阅读