Ionic 3 登录后刷新侧边菜单

Posted 2023-03-13

【中文标题】Ionic 3 登录后刷新侧边菜单

【英文标题】：Ionic 3 refresh side menu after login

【发布时间】：2017-12-25 23:07:06

【问题描述】：

我需要根据用户的角色显示侧边菜单项。所以如果页面（角色）等于登录角色，我会检查 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', 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>

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

【参考方案1】：

为此，您可以使用Events API

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

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);
  );

【讨论】：

你能解释一下吗？

@SagarKodte 在一个组件中，您向events.publish() 提供数据，然后在另一个组件中，您使用events.subscribe() 访问该数据。在上面的例子中，数据是user 和time。

@TomislavStankovic 实际上我想用它来登录和注册。我想在登录或注册后更新侧边栏中的菜单。

@Tomislav Stankovic 我们可以使用它来更新登录用户详细信息吗？使用它的正确方法吗？

@DenisBhojvani 是的，您可以使用它。