Javascript 如何在登录爱奥尼亚3后更新侧边栏，而无需重新打开应用程序或在浏览器中刷新？

我在我的ionic 3应用程序中创建了一个登录和注册功能，它也可以正常工作，但登录后的用户名在侧栏中没有立即更新意味着我需要刷新浏览器，或者在侧栏中显示此用户名后，我必须关闭应用程序并重新打开应用程序。但是我想在登录后显示username instanlty，用于刷新我在登录后添加的加载程序页面，但不起作用。我在ionic 3中查看了事件api，但没有了解如何使用。请帮忙。下面是我的login.ts、app.component.ts和app.html

login.ts

import { Component } from '@angular/core';
import { IonicPage,Events, NavController, LoadingController NavParams,ToastController } from 'ionic-angular';
import { SignupPage } from '../signup/signup';
//import { HomePage } from '../home/home';
import {
    AuthServiceProvider
} from "../../providers/auth-service/auth-service";

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  loading:any;
    responseData : any;
    userData = {"user":"","password":""};

  constructor(public loadingCtrl: LoadingController,public events: Events,private toastCtrl: ToastController,public navCtrl: NavController, public navParams: NavParams,public authService:AuthServiceProvider) {

        //this.title = this.navParams.get('title');
  }




  login(){
         var userMe = '';
      for(var key in this.userData) {
        if(key) {
          userMe = userMe + key + '=' + this.userData[key] + '&';
        }
        // console.log(this.userData[key]);
      }
     this.authService.postData(userMe,'user/login').then((result) => {
      this.responseData = result;
      //console.log(this.responseData);
      if(this.responseData.status == 1){
          this.loading = this.loadingCtrl.create({
            content: 'Waiting...'
        });
        this.loading.present();
      //console.log(this.responseData);
      localStorage.setItem('userStorage', JSON.stringify(this.responseData));
      this.navCtrl.popToRoot();
      this.loading.dismiss();
      ///this.navCtrl.push(TabsPage);
      }
    else{ 

       let toast = this.toastCtrl.create({
        message: this.responseData.message,
        duration: 3000,
        position: 'bottom'
      });

      toast.onDidDismiss(() => {
        console.log('Dismissed toast');
      });

      toast.present(); 
  }
    }, (err) => {
      // Error log
    });

  }


  pushSignup(){
    this.navCtrl.push(SignupPage);
  }
/*  pushHome(){
    this.navCtrl.push(HomePage);

  }*/

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');

  }

}

app.component.ts

// Angular
import { Component, ViewChild } from '@angular/core';

// RxJS
import { ReplaySubject } from "rxjs/ReplaySubject";
//import { ArrayObservable } from "rxjs/observable/ArrayObservable";

// Ionic
import { Nav,Events, Platform,NavController,LoadingController, MenuController } from 'ionic-angular';
import { AuthServiceProvider } from '../providers/auth-service/auth-service';

// Ionic Native
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

// Pages
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';

// Side Menu Component


@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    @ViewChild('myNav') nav: NavController

    // Get the instance to call the public methods

    public rootPage: any = HomePage;
    loading: any;
    userStorage: any;
    hideMe:any;
    showMe = false;
    showButton : any=false;

    // Options to show in the SideMenuComponent


    private unreadCountObservable: any = new ReplaySubject<number>(0);

    constructor(public authService:AuthServiceProvider ,
                private platform: Platform,
                private statusBar: StatusBar,
                private splashScreen: SplashScreen,
                private event: Events,              
                private menuCtrl: MenuController,
                 public loadingCtrl: LoadingController) {
        this.initializeApp();
        this.profileName();

    }



    initializeApp() {
        this.platform.ready().then(() => {
            this.statusBar.styleLightContent();
            this.splashScreen.hide();



        });

        // Change the value for the batch every 5 seconds
        setInterval(() => {
            this.unreadCountObservable.next(Math.floor(Math.random() * 10));
        }, 5000);

    }

     openMenu() {
   this.menuCtrl.open();
 }

 closeMenu() {
   this.menuCtrl.close();
 }

 toggleMenu() {
   this.menuCtrl.toggle();
 }
 login(){
    this.nav.push(LoginPage);
 }

  logout() {
        this.loading = this.loadingCtrl.create({
            content: 'Waiting...'
        });
        this.loading.present();
        localStorage.clear();
        this.showMe = false;

         this.loading.dismiss();

  }

  profileName(){
    if (this.userStorage = JSON.parse(localStorage.getItem('userStorage'))) {
        this.showMe = true;
        this.showButton = true;
    }
    else{
        this.showMe = false;
    }



  }


}

//角度
从“@angular/core”导入{Component，ViewChild}；
//RxJS
从“rxjs/ReplaySubject”导入{ReplaySubject}；
//从“rxjs/observable/ArrayObservable”导入{ArrayObservable}；
//离子的
从“ionic angular”导入{Nav、事件、平台、NavController、LoadingController、MenuController}；
从“../providers/auth service/auth service”导入{AuthServiceProvider}；
//离子原生
从'@ionic native/status bar'导入{StatusBar}；
从'@ionic native/SplashScreen'导入{SplashScreen}；
//页数
从“../pages/home/home”导入{HomePage}；
从“../pages/login/login”导入{LoginPage}；
//侧菜单组件
@组成部分({
templateUrl:'app.html'
})
导出类MyApp{
@ViewChild（'myNav'）导航：导航控制器
//获取实例以调用公共方法
公共根页面：any=主页；
装载：任何；
用户存储：任何；
希德姆：任何；
showMe=假；
showButton:any=false；
//要在SideMenuComponent中显示的选项
private unreadcountable:any=新的ReplaySubject（0）；
构造函数（公共authService:AuthServiceProvider，
私有平台：平台，
私有状态栏：状态栏，
私人splashScreen:splashScreen，
私人活动：活动，
private menuCtrl:MenuController，
公共加载（Ctrl:LoadingController）{
这是.initializeApp（）；
this.profileName（）；
}
初始化EAPP（）{
this.platform.ready（）。然后（（）=>{
this.statusBar.styleLightContent（）；
这个.splashScreen.hide（）；
});
//每5秒更改批次的值
设置间隔（（）=>{
this.unreadcannotobservable.next（Math.floor（Math.random（）*10））；
}, 5000);
}
openMenu（）{
this.menuCtrl.open（）；
}
关闭菜单（）{
this.menuCtrl.close（）；
}
切换菜单（）{
this.menuCtrl.toggle（）；
}
登录（）{
本导航推送（登录页面）；
}
注销（）{
this.loading=this.loadingCtrl.create({
内容：“等待…”
});
this.loading.present（）；
localStorage.clear（）；
this.showMe=false；
this.loading.disclose（）；
}
profileName（）{
if（this.userStorage=JSON.parse（localStorage.getItem（'userStorage'））{
this.showMe=true；
this.showButton=true；
}
否则{
this.showMe=false；
}
}
}

侧边栏的app.html

<ion-menu [content]="myNav">
  <ion-content>
    <div class="item item-avatar" style="padding: 25px;border-bottom: 1px solid #ccc;">
            <img src="//ionicframework.com/img/docs/spengler.jpg">
            <h5 *ngIf="showMe == true" class="after-login">{{userStorage.data.surname}}</h5>
            <!-- <h6 *ngIf="showMe == true" class="before-login">Please Login.</h6> -->
            <!-- <p>Nine Inch Nails</p> -->
    </div>
    <ion-item *ngIf="showMe == false" menuClose detail-none (click)="login()">Login</ion-item>
    <ion-item menuClose detail-none (click)="">My Business</ion-item>
    <ion-item menuClose detail-none (click)="">Package</ion-item>
    <ion-item menuClose detail-none (click)="">Wallet</ion-item>
    <ion-item menuClose detail-none (click)="">Invite Friends</ion-item>
    <ion-item menuClose detail-none (click)="">Profile</ion-item>
    <ion-item menuClose detail-none (click)=""> FAQ</ion-item>
    <ion-item *ngIf="showMe == true" menuClose detail-none (click)="logout()">Logout</ion-item>
  </ion-content>
</ion-menu>

<ion-nav #myNav [root]="rootPage"></ion-nav>

{{userStorage.data.name}
登录
我的生意
包裹
钱包
邀请朋友
轮廓
常见问题
注销

您可以使用

Events是一个发布-订阅样式的事件系统，用于发送和 响应应用程序中的应用程序级事件

在一个组件中，您向

events.publish（）

提供数据，然后在另一个组件中，您通过

events.subscribe（）

访问该数据。在上面的示例中，数据是

用户

和

时间

就你而言

this._events.publish('user:signedIn',
              this.userData = 
 localStorage.setItem('userStorage', JSON.stringify(this.responseData)
 );

然后

_events.subscribe('user:signedIn', (userEventData) => {
    this.userData = localStorage.getItem('userStorage');
   });

---

我不知道如何在我的代码中使用它。我已经对你的这篇文章发表了评论，想知道如何使用它。请你帮我写代码好吗？

_events.subscribe('user:signedIn', (userEventData) => {
    this.userData = localStorage.getItem('userStorage');
   });