如何在侧边菜单 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() 是一个方法，当登录状态发生变化时，它会返回一个 Observable。它的数据是boolean。你可能已经在你的 API 中有这个，就像 firebase 一样，或者你需要维护/编写它。让我知道你在使用什么，我会更新我的答案。