typescript 登录后Ionic 3刷新侧菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45211533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic 3 refresh side menu after login
提问by Shivam
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.
我需要根据用户的角色显示侧边菜单项。所以我在 app.html 中检查页面（角色）是否等于登录角色。但它不会在登录后立即显示菜单内的项目，但在使用浏览器刷新按钮刷新应用程序后，它会显示正确的项目。我想问题是 ionic 正在缓存菜单视图，如果是这样，我该如何刷新应用程序以显示新菜单项。
Every time I login 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
应用程序.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.
我正在根据登录用户设置角色变量。
回答by Tomislav Stankovic
For that you can use Events API
为此，您可以使用Events API
Events is a publish-subscribe style event system for sending and responding to application-level events across your app.
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);
});
}
