如何更新离子2侧菜单中的值 [英] How to update value inside ionic 2 side menu

问题描述

如何在Ionic2中将日期从页面转移到侧面菜单，即 -
app.page.html 如下：

How to "transfer" date from page into side-menu in Ionic2, i.e - Having app.page.html like following:

<ion-menu [content]="content">

    <ion-content class="menu-left">
        <!-- User profile -->
        <div text-center padding-top padding-bottom class="primary-bg menu-left">
            <a menuClose>
                <h4 light>{{userName}}</h4>
            </a>
        </div>

        <ion-list class="list-full-border">
            <button ion-item menuClose *ngFor="let page of pages" (click)="openPage(page)">
        <ion-icon item-left name="{{ page.icon }}"></ion-icon>
        {{ page.title }}
        <ion-badge color="danger" item-right *ngIf="page.count">{{ page.count }}</ion-badge>
      </button>
        </ion-list>
    </ion-content>

</ion-menu>

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

如何更新 userName 行动价值在页面上的数据来自 facebookLogin.page ？

how to update userName value upon the action in the page upon the data gotten from facebookLogin.page ?

facebookLogin.page。 ts ：

...
fbLogin() {
    Facebook.login(["public_profile", "email"])
      .then((resp: FacebookLoginResponse) => {

        if (resp.status === "connected") {
          Facebook.api("/me", ["public_profile", "email"])
            .then(res => {
             this.userName = res.name
              this.login({name: this.userName})
            })
        ...
      );
  }

 login(params) {
    this.nav.setRoot(HomePage, params);
  }
...

（那么，我将如何导入 userName 我登录facebook后 ion-sideMenu app.html ;我如何才能使 EventEmmiter ，服务 / 观察更改app.html的离线菜单...其他方式？）

(so, how would I import the userName which I get after login with facebook into ion-sideMenu in app.html; how I could make EventEmmiter, service/observe for changes in app.html's ion-menu ... some other way?)

推荐答案

ionic2 - 使用事件

查看活动 docs

它们允许您从任何页面发布某个操作，并在另一个页面中订阅它以检索该值。您的方案看起来有点像这样。

They allow you to 'publish' an action from any page, and subscribe to it in another page to retrieve the value. Your scenario would look a bit like this.

导入（在 Facebooklogin.component 和 app.component ）

从'ionic-angular'导入{Events}; 和你的构造函数构造函数（公共事件：事件）

然后，每当你改变你的 userName （Facebook登录处理程序中的fe）发布这样的值。

Then, whenever you change your userName (f.e. in the handler of the facebook login) publish the value like this.

fbLogin() {
    Facebook.login(["public_profile", "email"])
      .then((resp: FacebookLoginResponse) => {

        if (resp.status === "connected") {
          Facebook.api("/me", ["public_profile", "email"])
            .then(res => {
             this.userName = res.name
             // publish the username change to the events
             this.events.publish('username:changed', this.userName);
              this.login({name: this.userName})
            })
        //...
      );
  }

并订阅在应用程序中发布的任何发布.component

userName: string;

constructor(events: Events) {
   this.userName = "not logged in";

   events.subscribe('username:changed', username => {
      if(username !== undefined && username !== ""){
        this.userName = username;
      }
   }) //... 
}

---

angular2 - 使用 EventEmitter

---

angular2 - using EventEmitter

import { EventEmitter } from '@angular/core';

public userChanged = new EventEmitter();

fbLogin() {
        Facebook.login(["public_profile", "email"])
          .then((resp: FacebookLoginResponse) => {

            if (resp.status === "connected") {
              Facebook.api("/me", ["public_profile", "email"])
                .then(res => {
                 this.userName = res.name
                 // publish the username change to the events
                 this.userChanged.emit(this.userName);
                 this.login({name: this.userName})
                })
            ...
          );
      }

App.component

App.component

import { FacebookLogin } from '../pages/facebook/facebook.component';

public userName;

constructor(fb: FacebookLogin){

    this.userName = "";
    //subscribe to the page's EventEmitter
    this.fb.userChanged.subscribe(username => {
       this.userName = username;
    });
}

或使用 EventEmitter 如本SO所述，输出回答： EventEmitter的正确使用方法是什么？

OR use the EventEmitter as an Output as described in this S.O. answer: What is the proper use of an EventEmitter?

这篇关于如何更新离子2侧菜单中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！