Wie können Menüelemente im Seitenmenü in app.html angezeigt/ausgeblendet werden? Ionic 2

Question

In meinem app.component.ts definiere ich die Seiten, die in meinem Seitenmenü gehen werden. Und in meinem app.html habe ich meine <ion-menu> mit allen Menüpunkten. Es gibt jedoch einige, die aktiviert werden, wenn sich der Benutzer anmeldet.

In meinem app.component.ts ich das Token des Benutzers zu wissen, ob ich angemeldet (das im localstorage gespeichert wird, wenn sich der Benutzer anmeldet) und ich es in einer Variablen speichern und diese habe ich es wie in meinem HTML-bedingten ngIf mit .

Wenn der Benutzer jedoch durch die Anwendung navigiert und auf Abmelden klickt, wird das Seitenmenü nicht um mehr als das Entfernen des Token des Benutzers aus dem lokalen Speicher aktualisiert.

Das ist mein app.component.ts:

import { HomePage } from '../pages/home/home'; 
import { LoginPage } from './../pages/login/login'; 
import { OtherPage1 } from './../pages/others/other_one'; 
import { OtherPage2 } from './../pages/others/other_two'; 

export class MyApp { 
    @ViewChild('content') menu : NavController; 
    rootPage:any = HomePage; 
    public userToken; 
    login = LoginPage; 
    home = HomePage; 
    other_1 = OtherPage1; 
    other_2 = OtherPage2; 

    constructor(...) { 
    platform.ready().then(() => { 
     statusBar.styleDefault(); 
     splashScreen.hide(); 
    }); 

    this.userToken = localStorage.getItem('idTokenUser'); 

    [...] 
    } 

    goPage(page:any){ 
    this.menu.setRoot(pagina); 
    this.menuCtrl.close(); 
    } 

    logout(){ 
    localStorage.removeItem('idTokenUser') 
    this.menu.setRoot(HomePage); 
    this.menuCtrl.close(); 
    } 

} 

Das ist mein app.html:

<ion-menu [content]="content" persistent="true"> 
    <ion-header color="primary"></ion-header> 
    <ion-content> 
     <ion-list> 
      <button ion-item (click)="goPage(home)"> 
      <ion-icon item-start name="home"></ion-icon> 
      Home</button> 

      <button ion-item *ngIf="userToken" (click)="goPage(other_1)"> 
      <ion-icon item-start name="clipboard"></ion-icon> 
      Other 1</button> 

      <button ion-item *ngIf="userToken" (click)="goPage(other_2)"> 
      <ion-icon item-start name="people"></ion-icon> 
      Other 2</button> 

      <button ion-item *ngIf="!userToken" (click)="goPage(login)"> 
      <ion-icon item-start name="key"></ion-icon> 
      Login</button> 

      <button ion-item *ngIf="userToken" (click)="logout()"> 
      <ion-icon item-start name="close-circle"></ion-icon> 
      Logout</button> 

     </ion-list> 
    </ion-content> 
</ion-menu> 

<ion-nav [root]="hom" #content></ion-nav> 

Was die Art und Weise Artikel in Seitenmenü zu entfernen ist, wenn Der Benutzer klickt, um sich jederzeit abzumelden?

Answer 1

Ändern Sie den Logout-Funktion

logout(){ 
    localStorage.removeItem('idTokenUser'); 
    this.userToken = null; 
    this.menu.setRoot(HomePage); 
    this.menuCtrl.close(); 
    }