如何更新 ionic 2 侧菜单中的值

Posted 2023-03-13

【中文标题】如何更新 ionic 2 侧菜单中的值

【英文标题】：How to update value inside ionic 2 side menu

【发布时间】：2017-05-07 21:28:40

【问题描述】：

如何将日期从页面“转移”到 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；我如何制作 EventEmmiter、service/观察 app.html 的 ion-menu 的变化...其他方式？）

【问题讨论】：

什么是facebookLogin.page？显示一些代码。

请添加到帖子中

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

【参考方案1】：

ionic2 - 使用事件

查看活动docs

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

导入（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)
                )
            ...
          );
      

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 作为Output，如本 S.O. 中所述。答案：What is the proper use of an EventEmitter?

【讨论】：

好的，你会不会很酷地提出仅使用 Angular2 功能的示例 - 服务，eventEmmiters...（因为 ion Events 工作正常）:) tnks

是的，当然，等一下，EventEmitter 也可以工作

您绝对可以在中间使用 Service 做同样的事情，以确保您拥有相同的对象。 （不确定这如何在页面对象的角度上起作用）但我相信 EventEmitter 仍将在服务中