如何在侧面菜单中显示和隐藏页面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，或者您需要维护/编写它。让我知道你在用什么，我会更新我的答案。