2017-08-16 7 views
0

私のapp.component.ts私は私のサイドメニューに入るページを定義します。 そして私のapp.htmlには私のすべてのメニュー項目の私の<ion-menu>があります。ただし、ユーザーがログオンするとアクティブになるものもあります。私app.component.tsapp.htmlのサイドメニューでメニュー項目を表示/非表示にする方法は?イオン2

私は、ユーザーの私がログインしているかどうかを知るためにトークンを取得(これはlocalstorageときにユーザーがログイン中に保存されている)、私は変数に保存し、これは私がngIfを使用して、私のhtmlで、条件としてそれを置きます。

しかし、ユーザーがアプリケーションをナビゲートしてログアウトすると、サイドメニューはローカルストアからユーザーのトークンを削除するだけでは更新されません。

これは私のapp.component.tsです:

<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> 

、サイドメニューの項目を削除する方法は何である:これは私のapp.htmlある

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(); 
    } 

} 

ユーザーはいつでもログアウトするためにクリックしますか?

+0

にしたい場合は、常に '$使用してサイドメニューを非表示にすることができます( 'sidemenu')。ログアウトクリックで')(非表示にします。 – weBBer

答えて

0

の変更ログアウト機能

logout(){ 
    localStorage.removeItem('idTokenUser'); 
    this.userToken = null; 
    this.menu.setRoot(HomePage); 
    this.menuCtrl.close(); 
    } 
関連する問題