Как показать и скрыть страницу в боковом меню 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, или вам нужно его поддерживать/писать. Дайте мне знать, что вы используете, и я обновлю свой ответ.