Question

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

在我的app.component.ts中，我获取用户的令牌以了解我是否已登录（当用户登录时，这会保存在localstorage中）并将其保存在变量中我在使用ngIf的html中将其作为条件。

但是当用户浏览应用程序并单击注销时，侧面菜单不会被刷新，只能从本地存储中删除用户的令牌。

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

将注销功能更改为

(function () {
    'use strict';
    function process(event) {
        event.preventDefault();
        var $form = $(this);
        var data = $form.serialize()+'&save='+encodeURI(document.activeElement.getAttribute('value'));
        console.log('posted data', data);

        $.ajax({
            type: 'POST',
            url: url,
            data: data
        }).done(function(data) {
             ...
        });
    }
    $(document).on('submit', 'form', process);
})();

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

1 个答案: