如何在Ionic 2侧边栏中更新值

Question

如何将页面中的日期“传输”到Ionic2的side-menu中，即 - 假设有以下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>

如何在页面上的操作根据从facebookLogin.page获取的数据更新userName值？

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

那么，我如何将登录Facebook后获得的userName导入到app.html中的ion-sideMenu中？我该如何为ion-menu提供EventEmitter、service/observe以便监听其更改...有其他方法吗？

- Vovan_Super

---

facebookLogin.page是什么？请展示一些代码。 - Sergey Sokolov

请将其添加到帖子中。 - Sergey Sokolov

我不明白为什么你要请求另一种方式而不是观察变化？在我看来，这是最好的方法，可以更轻松地注销并使用不同的社交媒体和不同的页面登录。 - Ivar Reukers

Answer 1

ionic2 - 使用Events

查看Events 文档

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

导入（在Facebooklogin.component和app.component上都要导入）

import { Events } from 'ionic-angular'; 然后在构造函数中添加 constructor(public events: Events)

然后，每当您更改您的userName（例如在facebook登录的处理程序中），请像这样发布该值。

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

订阅你的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 - 使用 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})
                })
            ...
          );
      }

应用程序组件

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

或者可以像此S.O.答案中所述将EventEmitter用作Output：What is the proper use of an EventEmitter?

- Ivar Reukers

---

好的，你能否很酷地提供一个只使用Angular2功能（如服务、事件发射器）的示例呢？（因为ion Events运行良好）谢谢。 - Vovan_Super

当然可以，稍等一下，EventEmitter 也可以工作。 - Ivar Reukers

你肯定可以使用一个服务来确保你拥有相同的对象（不确定在 Angular 中如何使用页面对象），但 EventEmitter 仍将存在于该服务中。 - Ivar Reukers