如何在侧面菜单中显示和隐藏页面ionic2

Question

我想在ionic2中创建侧菜单。但是，我不知道如何在菜单内显示和隐藏选项。我想在登录之前和登录后显示一些内部菜单中的选项。

Before login             After login
---------                ---------
Home                     Home
Login                    Myprofile
                         Logout

app.ts

pages: Array<{title: string, component: any}>;
    pagess: Array<{title: string, component: any}>;
    this.pages= [
          { title: 'Home', component: HomePage},
          { title: 'Login', component: LoginPage}
        ];
    this.pagess = [
          { title: 'Home', component: HomePage},
          { title: 'Myprofile', component: MyprofilePage},
          { title: 'Logout', component: HomePage}
        ];
enableMenu(loggedIn: boolean) {
    this.menu.enable(loggedIn, 'loggedInMenu');
    this.menu.enable(!loggedIn, 'loggedOutMenu');
  }

我不知道如何设置enablemenu

app.html

<ion-menu id="loggedOutMenu" [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-menu id="loggedInMenu" [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pagess " (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

login.ts（登录是在myphpfile中检查）

login() {
       this.api.getLogin(this.username, this.password).subscribe(
   data => {
     let loader = this.loadingCtrl.create({
      content: "Please wait...",
      duration: 1000
    });
    loader.present();
    this.navCtrl.setRoot(HomePage);
   },
   err =>  {
    let alert = this.alertCtrl.create({
      title: 'Warning!',
      subTitle: 'incorrect!',
      buttons: ['OK']
    });
    alert.present();
  }
  );
}

Answer 1

您可以通过订阅/收听loggedIn事件来做到这一点。现在，这与您的普通登录不同。您需要检查是否已登录。

您的app.html代码将保持原样：

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" *ngIf='p.isVisible'>
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

现在，这是app.ts的主要变化。

pages: Array<{title: string, component: any, isVisible: boolean}>;
constructor(){
  this.api.isLoggedIn().subscribe(loggedIn => {
    this.pages= [
      { title: 'Home', component: HomePage, isVisible: true},
      { title: 'Login', component: LoginPage, isVisible: !loggedIn},
      { title: 'Myprofile', component: MyprofilePage, isVisible: loggedIn},
      { title: 'Logout', component: LogoutPage, isVisible: loggedIn}
    ];
  });
}

现在，当更改登录状态时，您的isLoggedIn()是一种方法，可返回可观察的方法。它的数据是boolean。您可能已经像Firebase一样在API中将其放置，或者您需要维护/编写它。让我知道您在使用什么，我将更新我的答案。