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

问题描述

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

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.

推荐答案

为此，您可以使用 事件 API

Events 是一个发布-订阅风格的事件系统，用于发送和在您的应用中响应应用级事件.

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