问题描述
如何在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 - 使用事件
查看活动
它们允许您从任何页面发布某个操作，并在另一个页面中订阅它以检索该值。您的方案看起来有点像这样。
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所述，输出回答：
OR use the EventEmitter as an Output as described in this S.O. answer: What is the proper use of an EventEmitter?
这篇关于如何更新离子2侧菜单中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！