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

Question

我在我的 ionic 3 应用程序中创建了登录和注册功能，它也能正常工作，但登录后的用户名没有立即在边栏中更新，这意味着我需要刷新浏览器，或者我必须关闭应用程序并在这之后重新打开应用程序用户名显示在侧边栏中。但是我想在登录后显示用户名 instanlty 以刷新我在登录后添加加载程序但不起作用的页面。我查看了 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');

  }

}

应用程序组件.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() 访问该数据。在上面的示例中，数据是 user 和 time。

在你的情况下

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

然后

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