Question

下面的脚本或其中的一部分应该通过Firebase将其他提供商与Facebook链接起来。但问题不是Firebase的功能，而是Ionic 2上的Angular 2。我有一个两个条件布局，其中布尔值应隐藏一个按钮并显示另一个按钮，反之亦然。

home.html模板如下：

<ion-header>
  <ion-navbar>
    <ion-title>
     User logged in
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card *ngIf="user">
    <img *ngIf="user.photoURL" [src]="user.photoURL" />
    <ion-card-content>
      <ion-card-title>
        {{ user.displayName }}
      </ion-card-title>
      <p>
        User's UID is {{user.uid}} and the email is {{user.email}}
      </p>
    </ion-card-content>
    <button *ngIf="hasFacebook" ion-button (click)="checkinFB()">Check in on FB</button>
    <button *ngIf="!hasFacebook" ion-button (click)="linkWithFB()">Link with FB</button>
    <button ion-button (click)="doLogout()">Logout</button>
  </ion-card>
</ion-content>

虽然打字稿组件是：

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    user;
    public hasFacebook: boolean = false;
    FB_APP_ID: number = xxxxxxxxxxxxxxx;

    constructor(public navCtrl: NavController, public geofenceTracker: GeofenceTracker, public authData: AuthData) {
        this.user = AuthData.getUser();
        let self = this;
        if (this.user.hasOwnProperty('providerData')) {
            this.user.providerData.some(function (provider) {
                if (provider.providerId == 'facebook.com') {
                    self.hasFacebook = true;
                    return self.hasFacebook;
                }
            });
        }
        console.log(this.hasFacebook);
        this.geofenceTracker.addGeofence();
        Facebook.browserInit(this.FB_APP_ID, "v2.8");
    }

    linkWithFB() {
        let permissions = ["email", "public_profile", "user_friends"];
        Facebook.login(permissions)
            .then((response) => {
                let facebookCredential = firebase
                    .auth
                    .FacebookAuthProvider
                    .credential(response.authResponse.accessToken);
                this.authData.linkWithFB(facebookCredential)
                    .then((user) =>{
                        console.log("Account linking success" + JSON.stringify(user));
                        console.log(this.toString());
                        this.hasFacebook = true;
                        //window.location.reload();
                    }, function (error) {
                        console.log("Account linking error", error);
                    });
            }, function (error) {
                console.log("Account linking error", error);
            });
    }

问题在于linkWithFB（）函数，即使它更新了＆＃34; hasFacebook＆＃34;变量，它不反映布局的变化。我使用lambda表达式来维护＆＃34;这个＆＃34;范围，我甚至尝试使用＆＃34; self = this＆＃34;声明在功能的顶部，但无济于事。

正如您在注释部分中看到的那样，现在唯一的解决方案是在链接成功后重新加载页面。

由于

Answer 1

看看是否有效。

作为示例执行此gist

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnDestroy {

  user;
  public hasFacebook: boolean = false;
  FB_APP_ID: number = xxxxxxxxxxxxxxx;
  hasFacebook$ : Subject<any> = new Subject();
  destroy$ : Subject<any> = new Subject();

  constructor(public navCtrl: NavController, public geofenceTracker: GeofenceTracker, public authData: AuthData) {

    // SUBSCRIBE TO THE EVENT
    this.hasFacebook$
      .takeUntil(this.destroy$)
      .subscribe(hasFaceBook => this.hasFacebook = hasFaceBook);

    this.user = AuthData.getUser();
    let self = this;
    if (this.user.hasOwnProperty('providerData')) {
      this.user.providerData.some(function (provider) {
        if (provider.providerId == 'facebook.com') {
          self.hasFacebook = true;
          return self.hasFacebook;
        }
      });
    }
    console.log(this.hasFacebook);
    this.geofenceTracker.addGeofence();
    Facebook.browserInit(this.FB_APP_ID, "v2.8");
  }

  linkWithFB() {
    let permissions = ["email", "public_profile", "user_friends"];
    Facebook.login(permissions)
      .then((response) => {
        let facebookCredential = firebase
          .auth
          .FacebookAuthProvider
          .credential(response.authResponse.accessToken);
        this.authData.linkWithFB(facebookCredential)
          .then((user) => {
            console.log("Account linking success" + JSON.stringify(user));
            console.log(this.toString());

            // EMIT A NEW VALUE TO THE SUBJECT
            this.hasFacebook$.next(true);

            //window.location.reload();
          }, function (error) {
            console.log("Account linking error", error);
          });
      }, function (error) {
        console.log("Account linking error", error);
      });
  }

  ngOnDestroy(){
    this.destroy$.next();
    this.destroy$.unsubscribe();
  }

}

Angular 2＆＃34; * ngIf＆＃34;不约束

1 个答案: