angular - 如何在菜单中显示用户名
问题描述
我的 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>
我知道我可以在用户登录时发布事件,但是如何在收到事件后重新加载菜单
解决方案
我有一个非常相似的案例,在我看来,事件是最好的方法:
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);
例如:
登录.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);
}
它将按预期工作。希望能帮助到你...
推荐阅读
- javascript - 如何使用复选框制作表单在选中时禁用其他输入但启用下一个输入de类型文本
- c# - C# 模板类,其中 T : ITemplate
- sql - 在 SQL Server 中查找重复项和几乎重复的条目
- angular - 未定义skipSelector
- reactjs - 将已知形状但大小未知的数组传递给组件?
- javascript - react js中状态改变后如何重新渲染?
- json - 访问 json 文件列表中的多个字典
- javascript - 如何停止正在运行的倒数计时器?
- laravel - $hidden 在 eloquent 模型中究竟有什么作用?
- vue.js - 如何使用 Vue.js 访问从 axios get 返回的数据以显示在网页上?