Question

我在离子2中有一个侧面菜单，我试图在用户登录后更新。我正在使用来自离子角度的事件。这就是我所做的。

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav, AlertController, MenuController, Events } from 'ionic-angular';
import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage:any = HomePage;
  logoutAlert:any;
  currentUser:any;

  @ViewChild('nav') nav: Nav;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public storage: Storage, public alertCtrl: AlertController, public menuCtrl: MenuController, public events: Events) {

    this.currentUser = {
      name: "Guest",
      username: "not logged in"
    };

    this.logoutAlert = this.alertCtrl.create({
      message: "Sure you want to log out?",
      buttons: [{text: "Yes", handler: () => {
        this.logoutUser();
      }}, {text:"No", role: "cancel"}]
    });

    this.menuCtrl.enable(false);

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  ionViewWillLoad() {

    this.events.subscribe("userloggedin", (user) => {
        this.currentUser = JSON.parse(user);
    });

  }

app.html

<ion-menu [content]="content">
    <ion-item>
        <ion-avatar>
            <img src="../assets/letters/{{currentUser.name}}.svg">
        </ion-avatar>
        <p>
            {{currentUser.username}}
        </p>
    </ion-item>
</ion-menu>

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

home.ts

import { Component, ViewChild } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { NavController, Slides, LoadingController, Events } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { HttpProvider } from '../../providers/http/http';
import { TabsPage } from '../tabs/tabs';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    @ViewChild('signSlides') signSlides: Slides;

    currentUser: any;
    loading:any;
    signinForm:any;

  constructor(public navCtrl: NavController,public formBuilder: FormBuilder, public storage: Storage, public httpProvider: HttpProvider, public loadingCtrl: LoadingController, public events: Events) {
    this.signinForm = formBuilder.group({
        email: [''],
        password: ['']
    });

    this.loading = this.loadingCtrl.create({
        content: "<ion-spinner></ion-spinner>"
    });
  }

  signinUser() {
    let params = {
        username: this.signinForm.value.email,
        password: this.signinForm.value.password
    };
    this.httpProvider.loginUser(params).subscribe(
        results => {
            this.loading.present();
            this.currentUser = results['_body'];
        },

        err => {
            alert("Oops! An error occured!");
        },
        () => {
            this.storage.set("currentUser", this.currentUser);
            this.loading.dismiss();
            this.navCtrl.setRoot(TabsPage);
        }
    );
  }

    this.httpProvider.registerUser(params).subscribe(
        results => {
            this.loading.present();
            this.currentUser = results['_body'];
        },
        err => {
            alert("Oops! An error occured!");
        },
        () => {
            this.storage.set("currentUser", this.currentUser);
        this.events.publish("userloggedin", this.currentUser);
            this.loading.dismiss();
            this.navCtrl.setRoot(TabsPage);
        }
    );

  }

  firstLetter(s:string) {
    s = s.toLowerCase();
    return s.charAt(0);
  }

}

我曾尝试将events.subscribe放入ionViewDidLoad，ionViewDidEnter和ngOnInit，但没有任何对我有用。来自home.ts的数据正在保存在存储器中，但我无法弄清楚为什么它不会在离子菜单中上升。

Answer 1

建议将字符串值传递给事件，而不是Json对象， this.events.publish("userloggedin", this.currentUser）;` 如果 this.currentUser 是home.ts中上面一段代码中的字符串，那么它应该按预期工作。而且在app.component.ts中，在构造函数中，您可以以这种方式放置代码。

this.events.subscribe("userloggedin", (user) => {
    this.currentUser = user
});

Answer 2

Auto与其他页面没有相同的回调，因此您必须将代码移动到类构造函数：

您不需要app.component，因为事件不会将对象转换为字符串。

在Ionic 2中动态更新侧面菜单

2 个答案: