登录后Ionic 3刷新侧菜单 [英] Ionic 3 refresh side menu after login

问题描述

我需要根据用户的角色显示侧边菜单项.所以我在 app.html 中检查页面(角色)是否等于登录角色.但它不会在登录后立即显示菜单内的项目，但在使用浏览器刷新按钮刷新应用程序后，它会显示正确的项目.我想问题是 ionic 正在缓存菜单视图，如果是这样，我如何刷新应用程序以显示新菜单项.

每次我用另一个用户/角色登录时，它会根据以前的用户/角色显示菜单.

app.component.ts

constructor() {this.initializeApp();this.pages = [{ title: 'Home', component: 'HomePage', icon: 'home', role: 5 },{ title: 'Profile', component: 'ProfilePage', icon: 'person', role: 5 },{ title: 'Account', component: 'AccountPage', icon: 'home', role: 5 },{ title: 'Search Employee', 组件: 'AtlasemployeehomePage', icon: 'home', role: 4 }];}

app.html

<div *ngFor="let p of pages"><button menuClose ion-item *ngIf="p.role == role" (click)="openPage(p)"><ion-icon name="{{p.icon}}" style="margin-right:10%"></ion-icon>{{p.title}}

<button menuClose ion-item (click)="presentLogout()"><ion-icon name="log-out" style="margin-right:10%"></ion-icon>登出</ion-list>

我正在根据登录用户设置角色变量.

解决方案

为此你可以使用 事件 API

<块引用>

Events 是一个发布订阅式的事件系统，用于发送和响应整个应用中的应用级事件.

import { Events } from 'ionic-angular';//login.ts 页面(创建用户时发布事件)构造函数(公共事件:事件){}创建用户(用户){console.log('用户已创建！')this.events.publish('user:created', user, Date.now());}//app.component.ts 页面(函数调用后监听用户创建的事件)构造函数(公共事件:事件){events.subscribe('user:created', (user, time) => {//user 和 time 是在 `events.publish(user, time)` 中传递的相同参数console.log('欢迎', 用户, '在', 时间);});}

I need to display side menu items according to the role of the user. so I check in app.html if the page (role) is equal to logged in role. But it does not display items inside menu just after login but after refreshing the app using browser refresh button it displays correct items as it should. I guess the problem is ionic is caching the menu view if it is so how can I refresh the app for new menu items to display.

Every time I login with another user/role, it displays menu according to the previous user/role.

app.component.ts

constructor() {
    this.initializeApp();
    this.pages = [
                    { title: 'Home', component: 'HomePage', icon: 'home', role: 5 },
                    { title: 'Profile', component: 'ProfilePage', icon: 'person', role: 5 },
                    { title: 'Account', component: 'AccountPage', icon: 'home', role: 5 },
                    { title: 'Search Employee', component: 'AtlasemployeehomePage', icon: 'home', role: 4 }
                 ];

  }

app.html

<ion-list>
      <div *ngFor="let p of pages">
        <button menuClose ion-item *ngIf="p.role == role"  (click)="openPage(p)">
          <ion-icon  name="{{p.icon}}" style="margin-right:10%"></ion-icon> {{p.title}}
        </button>
      </div>

      <button menuClose ion-item (click)="presentLogout()">
        <ion-icon name="log-out" style="margin-right:10%"></ion-icon> Logout
      </button> 
    </ion-list>

I am setting the role variable according to the logged in user.

解决方案

For that you can use Events API

Events is a publish-subscribe style event system for sending and responding to application-level events across your app.

import { Events } from 'ionic-angular';

// login.ts page (publish an event when a user is created)
constructor(public events: Events) {}
createUser(user) {
  console.log('User created!')
  this.events.publish('user:created', user, Date.now());
}


// app.component.ts page (listen for the user created event after function is called)
constructor(public events: Events) {
  events.subscribe('user:created', (user, time) => {
    // user and time are the same arguments passed in `events.publish(user, time)`
    console.log('Welcome', user, 'at', time);
  });
}

这篇关于登录后Ionic 3刷新侧菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！