动态更新 Ionic 2 中的侧边菜单

Question

我在ionic 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);
});
}

应用.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>

首页

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

app.component

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

@Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(private events: Events) {
this.events.subscribe("userloggedin", (user) => this.currentUser = user);
}
}

您不需要JSON.parse(user)因为 Events 不会将对象转换为字符串。