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

debugcn 发表于 Dev

保险丝

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

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

应用程序

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

}

萨加尔·库尔卡尼（Sagar kulkarni）

您可以通过订阅/收听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()的方法是更改登录状态时返回一个Observable的方法。它的数据是boolean。您可能已经在您的API中拥有了该功能，例如firebase，或者您需要对其进行维护/编写。让我知道您使用的是什么，我将更新我的答案。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。