AngularFire2 不会用答案

【问题标题】：AngularFire2 Doesn't sign user out withAngularFire2 不会用
【发布时间】：2019-11-15 02:45:45
【问题描述】：

我正在尝试使用 AngularFire2 库在我的 Ionic 4 应用中实现 Firebase 身份验证。我设置了正确的导入，以便我可以访问其他 AngularFireAuth 属性，但我似乎无法成功执行注销。我所有的 firebase 身份验证内容目前都发生在名为 home 的页面上。

我已经尝试删除承诺，但这似乎没有任何作用。

这是预登录的视图

这是登录后的视图

这是我的打字稿文件：

import { Component } from '@angular/core';
import {AngularFireAuth} from '@angular/fire/auth';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public afAuth: AngularFireAuth) {}

  signOut() {
    this.afAuth.auth.signOut().then(() => {
      location.reload();
    });
  }
}

这是我的 HTML

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    The world is your oyster.
    <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
  </div>
<firebase-ui></firebase-ui> <!-- EDIT: this is what firebaseui-angular uses to display the login UI -->
  <h1 *ngIf="afAuth.auth.currentUser">Welcome {{afAuth.auth.currentUser.displayName}}</h1>
  <ion-button *ngIf="afAuth.auth.currentUser" (click)="signOut">Sign Out</ion-button>
</ion-content>

我希望退出按钮更新页面并返回登录窗口并删除 Welcome Mike 文本并删除退出按钮。相反，退出按钮没有做任何事情。

【问题讨论】：

这是什么<firebase-ui></firebase-ui>？
@PeterHaddad 这些标签用于 firebaseui-angular 以显示登录 ui（它们在 NPM 上）。这部分并不是真正的问题，因为登录 ui 总是完美地显示并且在登录后自动隐藏。
你在使用 ionic 3 吗？
@PeterHaddad 我正在使用 Ionic 4
好的，我的回答成功了

标签： angular firebase ionic-framework angularfire2

【解决方案1】：

改变这个：

    this.afAuth.auth.signOut().then(() => {
      location.reload();
    });
  }

进入这个（离子 3）：

  constructor(public navCtrl: NavController) {}

  signOut() {
    this.afAuth.auth.signOut().then(() => {
      this.navCtrl.pop();
    });
  }

如果您使用的是 ionic 4，请使用以下内容：

  constructor(public navCtrl: NavController) {}

  signOut() {
    this.afAuth.auth.signOut().then(() => {
      this.navCtrl.back();
    });
  }

【讨论】：

是的，这正是我写的……但我给了你两种情况，一种用于 ionic 3，一种用于 ionic 4，它的一个构造函数...
它没有像你说的那样工作。我试着自己去理解它。我以为你是这个意思。在 signOut 类中有两个构造函数或有一个构造函数没有意义，所以我认为这会起作用，但它没有。：pastebin.com/fYqcaGiX 这与我只是导航到的事实有什么关系最后带有 /home 的那个页面（我在应用程序路由中的主页是别的东西。）@PeterHaddad

【解决方案2】：

好的，我想通了。这是一个非常微不足道的错误。我不小心没有从 HTML 端正确调用函数

这个：

<ion-button *ngIf="afAuth.auth.currentUser" (click)="signOut">Sign Out</ion-button>

应该是这样的：

<ion-button *ngIf="afAuth.auth.currentUser" (click)="signOut();">Sign Out</ion-button>

无论如何感谢您的努力（无论如何，使用 navCtrl 进行“刷新”可能很聪明）

【讨论】：