Ionic 3 Refresh Seitenmenü nach dem Login

Question

Ich muss Seitenmenüelemente entsprechend der Rolle des Benutzers anzeigen. also checke ich in app.html ein, wenn die Seite (Rolle) der eingeloggten Rolle entspricht. aber es zeigt keine Einträge im Seitenmenü direkt nach der Anmeldung an, aber nach dem Aktualisieren der App mit der Refesh-Taste des Browsers werden die richtigen Einträge angezeigt. Ich denke, das Problem ist ionische Zwischenspeicherung der Menüansicht, wenn es so ist, wie kann ich die App für neue Menüelemente aktualisieren, um anzuzeigen.

Jedes Mal, wenn ich mich bei einem anderen Benutzer/einer anderen Rolle anmelde, wird das Menü entsprechend dem vorherigen Benutzer/der vorherigen Rolle angezeigt.

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> 

ich die Rolle Variable bin Einrichtung in Benutzer den angemeldeten nach.

Answer 1

Dafür können Sie verwenden Events API

Events ist ein Publish-Subscribe-Stil Ereignissystem zum Senden und Reaktion auf Ereignisse auf Anwendungsebene über die 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); 
    }); 
}