javascript - 如何在登录 ionic 3 后更新侧边栏而不重新打开应用程序或在浏览器中刷新？

Question

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

登录.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;
    }



  }


}

侧边栏的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>

Answer 1

您可以使用Events API

Events is a publish-subscribe style event system for sending and responding to application-level events across your app.

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

在一个组件中，您向 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');
   });