如何更新ionic 2边菜单中的值?

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

如何在Ionic2中“转移”日期从页面到侧菜单，我。e - app.page。html像以下:

<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>

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

如何在从facebookLogin获得的数据时，在页面中的操作上更新用户名值。页面?

facebookLogin.page.ts:

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);
  }
...

(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?)

(那么，如何在app.html中将facebook登录后的用户名导入ion-sideMenu;如何使EventEmmiter、service/ observer在app.html的ion-menu中更改…其他方式?)

1 个解决方案

#1

ionic2 - using Events

Check out the Events 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.

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

Import (both on Facebooklogin.component and app.component)

导入(在facebooklog .component和app.component上)

import { Events } from 'ionic-angular'; and in your constructor constructor(public events: Events)

从“离子角度”导入{事件};在构造函数构造函数中(公共事件:事件)

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

然后，每当您更改用户名(在facebook登录的处理程序中为f.e.)时，就像这样发布值。

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})
            })
        //...
      );
  }

And subscribe to any publishes being made in your app.component

并订阅您的app.component中的任何发布

userName: string;

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

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

---

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;
    });
}

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

或者使用EventEmitter作为这个S.O.中描述的输出:event发射器的正确使用是什么?