如何在菜单中显示用户名 [英] how to show user name in menu

问题描述

我的app.component.ts中有一个{{user_name}}变量，我想用它来显示用户登录后从本地存储中获取的用户名.

I have a {{user_name}} variable in my app.component.ts and I want to use it for displaying the user name which I am getting from local storage after the user logs in.

但这仅在应用程序启动时加载，我想在用户登录后重新加载.登录后关闭并重新打开应用程序时，它可以正常工作并显示用户名.但是起初，它只显示"hi"，而不显示用户名.

But this loads only at app start and I want to reload it after the user logs in. When I close and reopen app after log in it works fine and user name displayed. But at first, it shows only "hi" and doesn't show the user name.

<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>

我知道我可以在用户登录时发布事件，但是在收到事件后如何重新加载菜单

推荐答案

在我看来，我有一个非常相似的案例事件是最好的选择:

I had a pretty similar case, in my opinion events are the best way to go:

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);
     }

它将按预期工作.希望对您有帮助...

It will work as expected. Hope it helps...

这篇关于如何在菜单中显示用户名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！