Question

我是否尝试设置根页，具体取决于用户是否已记录。用户登录后，侧边菜单无法正常工作。但如果刷新页面菜单工作完美。所以我认为页面或导航一定有问题，但我似乎无法弄明白。

app.component.ts

import {Component, ViewChild} from '@angular/core';
import {Platform, ionicBootstrap, Nav} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import { Login } from '../pages/login/login';

@Component({
  template: 'app.html'
})

export class MyApp {

  @ViewChild(Nav) nav: Nav;
  rootPage: any;

  constructor(platform: Platform) {

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      this.isLoggedIn();
    });


  }

  isLoggedIn() {
    this.userData.hasLoggedIn().then((value)=>{
      if(value == true) {
        this.rootPage = TabsPage;
      }else {
        this.rootPage = Login;
      }
    });
  }
}

app.html

<!-- logged in menu -->
<ion-menu side="right" id="loggedInMenu" [content]="content">

  <ion-content class="outer-content">

    <ion-list>
      <ion-list-header>
        Navigate
      </ion-list-header>
      <button ion-item tappable detail-none ion-item menuClose *ngFor="let p of appPages" (click)="openPage(p)">
        <ion-icon item-left [name]="p.icon"></ion-icon>
        {{ p.title | translate }}
      </button>
    </ion-list>

    <ion-list>
      <ion-list-header>
        Account
      </ion-list-header>
      <button ion-item tappable detail-none ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(p)">
        <ion-icon item-left [name]="p.icon"></ion-icon>
        {{ p.title | translate }}
      </button>
    </ion-list>

  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Login.ts

import {Component} from '@angular/core';
import { TabsPage } from '../tabs/tabs';

@Component({
  template: 'app.html'
})

export class Login {

  @ViewChild(Nav) nav: Nav;
  rootPage: any;

  constructor(platform: Platform) {}

  onLogin(form) {
    let me = this;
      if (form.valid) {
        me.navCtrl.setRoot(TabsPage);
      }
  }
}

的login.html

<ion-content class="login">
  <ion-list padding class="login_list">
    <div class="logo">
      <img src="assets/img/logo.png">
    </div>

    <form #loginForm="ngForm" (ngSubmit)="onLogin(loginForm)" novalidate>
      <ion-item>
        <ion-input [(ngModel)]="login.email" name="email" type="text" #email="ngModel" placeholder="{{ 'login.EMAIL' | translate }}" spellcheck="false" autocapitalize="off" required>
        </ion-input>
        <ion-icon name="person" item-left color="white"></ion-icon>
      </ion-item>

      <ion-item class="no-margin-buttom">
        <ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" placeholder="{{ 'login.PASSWORD' | translate }}" required>
        </ion-input>
        <ion-icon name="lock" item-left color="white"></ion-icon>
      </ion-item>

      <ion-row responsive-sm>
        <ion-col>
          <button ion-button tappable type="submit" full class="loginBtn">{{ 'login.LOGIN_Btn' | translate }}</button>
        </ion-col>
      </ion-row>
    </form>
  </ion-list>
  <ion-list no-lines padding class="footer">
  <ion-item>
    <button ion-button small clear color="white" item-right (click)="onSignup()">
      {{ 'login.Register' | translate }}
    </button>
    <button ion-button small clear color="white" item-left (click)="resetPassword()">
      {{ 'login.Forgot_password' | translate }}
    </button>
  </ion-item>
</ion-list>
</ion-content>

登录侧面菜单后工作不正常，但重新加载页面时它正常工作。

所以我的问题：有关于此的任何建议吗？

登录后无法正常工作的离子2侧菜单

0 个答案: