如何在Ionic 3中使用Facebook登录后导航到另一个页面

Question

我想在使用Facebook登录后导航到另一个页面。现在我可以使用Facebook登录并保持在同一页面上，但我想导航到另一个页面。

我的.html文件是

<button ion-button full (click)="loginWithFB()">Login!</button> 
<ion-card *ngIf="userData; else facebookLogin">
  <ion-card-header>{{ userData.username }}</ion-card-header>
  <img [src]="userData.picture" />
  <ion-card-content>
    <p>Email: {{ userData.email }}</p>
    <p>First Name: {{ userData.first_name }}</p>
  </ion-card-content>
</ion-card> 

我的 .ts 文件是

loginWithFB() {
  this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => {
    this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {
      this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']}
    });
  }); 
}

Answer 1

您只需要使用 facebook 登录调用后返回的承诺中的navController推送页面：

this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {
  this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']};
  this.navCtrl.push(PageName, PageParametersIfAny);
});

有两种推送页面的方法：

如果您
• 没有延迟加载应用程序，请直接从其文件导入页面。
• 如果延迟加载，只需传递包含页面名称的字符串。

如果不是懒惰加载，就像这样：

import { MyPage } from 'path/to/my/page/folder'; 
...
this.navCtrl.push(MyPage);

或者如果延迟加载：

this.navCtrl.push('MyPage'); // There's no import

希望这有帮助。