动态更新离子2中的侧面菜单

我在离子2中有一个侧面菜单，我在用户登录后尝试更新。我正在使用离子角度事件。这是我所做的。动态更新离子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的数据正在保存在存储器中，但我无法弄清楚它为什么不在离子菜单中上传。

来源

2017-07-30 Vishal Singh

它是一个评论，而不是一个答案 - 我会建议尝试使用例如ngrx的Redux模式，并在中心位置管理状态的所有方面。然后，您的组件（在这种情况下为MyApp）将订阅用户状态，并显示已登录的用户名，或者如果没有用户登录，则显示一些默认字符串。我自己从新做起。 – Michael

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

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

来源

2017-07-30 10:07:45

的app.component不具有相同的回调为其他页面，所以你必须在你的代码移动到类的构造函数：

你不需要JSON.parse(user)事件以来没有按”将该对象转换为字符串。

来源

2017-07-30 12:09:40 akz92

动态更新离子2中的侧面菜单

回答

相关问题