web-dev-qa-db-fra.com

Ionic 3 rafraîchir le menu latéral après la connexion

Je dois afficher les éléments du menu latéral en fonction du rôle de l'utilisateur. donc je vérifie dans app.html si la page (rôle) est égale au rôle connecté. Mais il n'affiche pas les éléments dans le menu juste après la connexion, mais après avoir actualisé l'application à l'aide du bouton d'actualisation du navigateur, il affiche les éléments corrects comme il se doit. Je suppose que le problème est ionic met en cache la vue du menu si c'est le cas, comment puis-je rafraîchir l'application pour afficher de nouveaux éléments de menu.

Chaque fois que je me connecte avec un autre utilisateur/rôle, le menu s'affiche en fonction de l'utilisateur/rôle précédent.

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>

Je configure la variable de rôle en fonction de l'utilisateur connecté.

angulartypescriptionic-frameworkionic2ionic3
11
Shivam

Pour cela, vous pouvez utiliser API d'événements

Events est un système d'événements de type publication-abonnement pour envoyer et répondre aux événements de niveau application dans votre application.

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);
  });
}
27
Tomislav Stankovic