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

问题描述

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

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.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();
  }
  );

}

推荐答案

你可以通过订阅/收听 loggedIn 事件来完成此操作。现在，这与您的正常登录不同。您需要检查您是否已登录。

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.

您的app.html代码将保持如下：

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>

现在这是 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（）是一个方法，当登录状态发生变化时，它返回一个Observable。它的数据是 boolean 。您可能已经在您的API中拥有此功能，例如firebase，或者您需要维护/写入它。让我知道你在使用什么，我会更新我的答案。

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.

这篇关于如何在侧面菜单IONIC2中显示和隐藏页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！