我的app.component.ts中有一个{{user_name}}
变量,我想用它来显示用户登录后从本地存储中获取的用户名。
但这仅在应用程序启动时加载,我想在用户登录后重新加载。登录后关闭并重新打开应用程序时,它可以正常工作并显示用户名。但是起初,它只显示“ hi”,而不显示用户名。
<ion-menu [content]="content" >
<ion-header>
<ion-toolbar>
<ion-title>
<p>
HI! {{user_name}}
</p></ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list >
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button menuClose ion-item (click)="logout()" >
Log Out
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
我知道我可以在用户登录时发布事件,但是在收到事件后如何重新加载菜单
答案 0 :(得分:2)
我有一个非常相似的案例,我认为events是最好的选择:
app.component.ts
import { ..., Events } from 'ionic-angular'; //First import events
constructor(
...
public events: Events,
...
){
.....
events.subscribe('user:created', (user) => {
this.user_name=user.name;
});
...
}
现在您可以使用this.events.publish('user:created', user);
例如:
login.ts
import { Your other imports...,Events} from 'ionic-angular';
constructor(
...
public events: Events,
...
) {}
// let's assume you did your login and have an user array which has user.name in it,
// pass that data like this
updateUserInfo(user){
this.events.publish('user:created', user);
}
它将按预期工作。希望对您有帮助...