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

问题描述

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

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 in side menu just after login but after refreshing the app using browser refesh button it display 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.

每次我loggin与另一个用户/角色，它根据以前的用户/角色显示菜单。

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

app.component.ts

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

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