如何在側面菜單中顯示和隱藏頁面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，或者您需要維護/編寫它。讓我知道你在用什麼，我會更新我的答案。