如何更新 ionic 2 侧边菜单中的值
How to update value inside ionic 2 side menu
如何在 Ionic2 中 "transfer" 从页面到 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/observe app.html 的 ion-menu 中的变化...其他方式?)
ionic2 - 使用事件
查看活动 docs
它们允许您 'publish' 来自任何页面的操作,并在另一个页面中订阅它以检索值。您的场景看起来有点像这样。
导入(在 Facebooklogin.component
和 app.component
上)
import { Events } from 'ionic-angular';
并在您的构造函数中 constructor(public events: Events)
然后,每当您更改 userName
(f.e。在 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 中所述。答案:
如何在 Ionic2 中 "transfer" 从页面到 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/observe app.html 的 ion-menu 中的变化...其他方式?)
ionic2 - 使用事件
查看活动 docs
它们允许您 'publish' 来自任何页面的操作,并在另一个页面中订阅它以检索值。您的场景看起来有点像这样。
导入(在 Facebooklogin.component
和 app.component
上)
import { Events } from 'ionic-angular';
并在您的构造函数中 constructor(public events: Events)
然后,每当您更改 userName
(f.e。在 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 中所述。答案: