Как обновить значение внутри бокового меню ionic 2

Как «перенести» дату со страницы на side-menu в Ionic2, т.е. - иметь 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>

как обновить значение userName при действии на странице при получении данных от 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, service/observe для изменений в ion-menu app.html... каким-то другим способом?)


typescript javascript angular ionic3 ionic2
person Vovan_Super    schedule 22.12.2016    source источник
comment
Что такое facebookLogin.page? Покажите какой-нибудь код.   -  person Sergey Sokolov    schedule 22.12.2016
comment
Добавьте в пост, пожалуйста   -  person Sergey Sokolov    schedule 22.12.2016
comment
Я не понимаю, почему вы запрашиваете другой способ вместо того, чтобы наблюдать за изменениями? На мой взгляд, это лучший способ, упрощающий выход из системы и вход в нее с помощью разных социальных сетей и разных страниц.   -  person Ivar Reukers    schedule 22.12.2016

Ответы (1)


arrow_upward
15
arrow_downward

ionic2 — использование событий

Ознакомьтесь с документами по событиям.

Они позволяют вам «опубликовать» действие с любой страницы и подписаться на него на другой странице, чтобы получить значение. Ваш сценарий будет выглядеть примерно так.

Импорт (как на 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;
    });
}

ИЛИ используйте EventEmitter как Output, как описано в этом S.O. ответ: Как правильно использовать EventEmitter?

person Ivar Reukers    schedule 22.12.2016
comment
хорошо, и не могли бы вы предложить пример, используя только функции Angular2 - сервисы, eventEmmitters... (поскольку ion Events работает нормально) :) tnks - person Vovan_Super; 22.12.2016
comment
Да, конечно, дайте мне минутку, EventEmitter тоже работает - person Ivar Reukers; 22.12.2016
comment
Вы определенно можете сделать то же самое с промежуточным сервисом, чтобы убедиться, что у вас есть тот же объект. (не уверен, как это работает в angular с объектами страницы), но EventEmitter все равно будет в службе, я полагаю - person Ivar Reukers; 22.12.2016