如何在 app.html 的侧边菜单中显示/隐藏菜单项？离子 2

Question

在我的app.component.ts 中，我定义了将进入我的侧边菜单的页面。 在我的app.html 中，我的<ion-menu> 包含所有菜单项。但是，有些是在用户登录时激活的。

在我的app.component.ts 中，我让用户的令牌知道我是否登录（当用户登录时，这保存在localstorage 中）并将它保存在一个变量中，我把它作为条件放在我的html 使用 ngIf。

但当用户浏览应用程序并单击注销时，侧边菜单不会通过从本地存储中删除用户令牌来刷新。

这是我的 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();
  }

}

这是我的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>

当用户点击退出时，任何时候删除侧边菜单中的项目的方法是什么？

Answer 1

将注销功能改为

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