选择按钮后再次弹出 Ionic 3 Alert

Question

我试图让登录，注销按钮，代码检查用户是否登录或注销。 如果他登录并尝试再次登录，则会显示他已经登录的警报。 如果他不是，它将直接将他发送到应用程序登录页面。 问题是当我尝试按下注销按钮并且对话框显示一次当前状态（登录）然后我选择注销并且它再次向我显示警报但这次我没有签名的警报还在。 我能做些什么？ 它也以相反的方式发生（登录）

代码：

App.component.ts：

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, AlertController } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { AngularFireAuth } from 'angularfire2/auth';
import { Dialogs } from '@ionic-native/dialogs';



@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage:string  = "Home";

  pages: Array<{title: string, component: string, icon: string }>;

  constructor(public platform: Platform, private AFauth: AngularFireAuth, private dialogs: Dialogs,
private alertCtrl: AlertController) {

this.initializeApp();

this.pages = [
  { title: 'דף הבית', component: "Home" , icon: "ios-home-outline"},
  { title: 'ספריית תרגילים', component: "TrainingLibrary", icon: "ios-bookmarks-outline"},
  { title: 'מתכונים', component: "Recipes", icon: "ios-book-outline"},
  { title: 'שאלות נפוצות' , component: "Faq" , icon:"ios-help-circle-outline" },
  { title: 'תוכניות אימון' , component: "Plans", icon:"ios-paper-outline"},
  { title: 'הגדרות', component: "Settings", icon:"ios-settings-outline"},
  { title: 'קישורים חיצוניים', component: "ExternalLinks", icon:"ios-link-outline" },

];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.AFauth.auth.onAuthStateChanged((user) => {
        if (user) {
        this.rootPage = 'Home';
        console.log("I'm here! HomePage");
        } else {
        this.rootPage = 'LoginPage';
        console.log("I'm here! LoginPage");
        }
        });
      StatusBar.backgroundColorByHexString('#6080b1');
      Splashscreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }



LogoutDialog(){
  this.AFauth.auth.onAuthStateChanged((user) => {
    if (user) {
      let alert = this.alertCtrl.create({
        title: 'התנתקות',
        message: 'האם אתה בטוח שברצונך להתנתק?',
        buttons: [
          {
            text: 'ביטול',
            role: 'cancel',
            handler: () => {
              console.log('Cancel clicked');
            }
          },
          {
            text: 'כן',
            handler: () => {
              this.AFauth.auth.signOut()   
            }
          }
        ]
      });
      alert.present();
    console.log("יכול להתנתק");
    } else {
      let alert = this.alertCtrl.create({
        title: 'אינך מחובר',
        subTitle: 'אינך יכול להתנתק כי אינך מחובר',
        buttons: ['אישור']
      });
      alert.present();
    console.log("לא מחובר");
    }
    });
  }
  Login(){
    this.AFauth.auth.onAuthStateChanged((user) => {
      if (user) {
        let alert = this.alertCtrl.create({
          title: 'הנך מחובר',
          subTitle: 'הנך מחובר כבר',
          buttons: ['אישור']
        });
        alert.present();
      console.log("מחובר");

      } else {
        this.nav.push("LoginPage");
      }
      });
  }

}

谢谢！

Answer 1

这里的问题是onAuthStateChanged返回一个Subscription，这意味着当认证状态改变时（例如成功退出后）会再次调用它。为了解决这个问题，您需要取消订阅侦听器。根据 API 参考，onAuthStateChanged 返回以下内容：

观察者的退订功能。

总之，您需要做的是在退出之前取消订阅。在你的情况下，它会是这样的：

LogoutDialog(){
let unsubscribe = this.AFauth.auth.onAuthStateChanged((user) => {
    if (user) {
      let alert = this.alertCtrl.create({
        title: 'התנתקות',
        message: 'האם אתה בטוח שברצונך להתנתק?',
        buttons: [
          {
            text: 'ביטול',
            role: 'cancel',
            handler: () => {
              console.log('Cancel clicked');
            }
          },
          {
            text: 'כן',
            handler: () => {
              unsubscribe()
              this.AFauth.auth.signOut()   
            }
          }
        ]
      });
      alert.present();
    console.log("יכול להתנתק");
    } else {
      let alert = this.alertCtrl.create({
        title: 'אינך מחובר',
        subTitle: 'אינך יכול להתנתק כי אינך מחובר',
        buttons: ['אישור']
      });
      alert.present();
    console.log("לא מחובר");
    }
    });
  }