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

Posted 2021-04-18

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

码：

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");
      }
      });
  }

}

谢谢！

答案

这里的问题是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("לא מחובר");
    }
    });
  }