How to show and hide page in side menu IONIC2

问题:

I want to create side menu in ionic2. But, I have no idea how to show and hide an option inside menu. I want to show some option inside menu, before login and after login.

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

I dont know how to set 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 (login is check in 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();
  }
  );

}

回答1:

You can do this by subscribing/listening to the loggedIn event. Now, this is different than your normal login. You need to check if you are logged in.

Your app.html code will remain like this:

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

Now here is the major change in 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}
    ];
  });
}

Now, your isLoggedIn() is a method, which returns an Observable, when the state of login is changed. It's data is boolean. You already might have this in your API like firebase has or you need to maintain/write it. Let me know what you are using and I will update my answer.