Html 选择按钮后，Ionic 3警报再次弹出

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

代码：

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

}

从'@angular/core'导入{Component，ViewChild}；
从“ionic angular”导入{Nav、平台、AlertController}；
从“离子本机”导入{StatusBar，Splashscreen}；
从'angularfire2/auth'导入{AngularFireAuth}；
从'@ionic native/Dialogs'导入{Dialogs}；
@组成部分({
templateUrl:'app.html'
})
导出类MyApp{
@ViewChild（导航）导航：导航；
rootPage:string=“Home”；
页面：数组；
构造函数（公共平台：平台，专用AFauth:AngularFireAuth，专用对话框：对话框，
专用alertCtrl:AlertController）{
这是.initializeApp（）；
此页=[
{标题：“主页”，组件：“主页”，图标：“ios主页轮廓”}，
{标题：“培训库”，图标：“ios书签大纲”}，
{标题：“ios书籍大纲”}，组件：“配方”，图标：“ios书籍大纲”}，
{标题：“常见问题”，图标：“ios帮助圈轮廓”}，
{标题：“计划”，图标：“ios文件大纲”}，
{标题：“设置”，组件：“设置”，图标：“ios设置大纲”}，
{标题：“外部链接”，图标：“ios链接轮廓”}，
];
}
初始化EAPP（）{
this.platform.ready（）。然后（（）=>{
//好了，平台准备好了，我们的插件也可以使用了。
//在这里，您可以做任何您可能需要的更高级别的本地操作。
this.AFauth.auth.onAuthStateChanged（（用户）=>{
如果（用户）{
this.rootPage='Home'；
log（“我在这里！主页”）；
}否则{
this.rootPage='LoginPage'；
log（“我在这里！登录页面”）；
}
});
StatusBar.backgroundColorByHexString（'#6080b1'）；
Splashscreen.hide（）；
});
}
openPage（第页）{
//将内容导航重置为仅包含此页面
//我们不希望在这种情况下显示“后退”按钮
this.nav.setRoot（page.component）；
}
LogoutDialog（）{
this.AFauth.auth.onAuthStateChanged（（用户）=>{
如果（用户）{
让alert=this.alertCtrl.create({
标题：“התתקות”，
信息：“האאתבחשברתנתקתק？”，
按钮：[
{
正文：“ביטול”，
角色：“取消”，
处理程序：（）=>{
log（'Cancel clicked'）；
}
},
{
正文：“•ן”，
处理程序：（）=>{
this.AFauth.auth.signOut（）
}
}
]
});
alert.present（）；
控制台日志（“יכלהתתק”）；
}否则{
让alert=this.alertCtrl.create({
标题：“איךמחובר”，
副标题：“אייכ㪡תתתיאךץבר”，
按钮：[“אישור”]
});
alert.present（）；
控制台日志（“לאמחובר”）；
}
});
}
登录（）{
this.AFauth.auth.onAuthStateChanged（（用户）=>{
如果（用户）{
让alert=this.alertCtrl.create({
标题：“הנךמחבר”，
副标题：‘הנךמוברכר’，
按钮：[“אישור”]
});
alert.present（）；
控制台日志（“מחובר”）；
}否则{
本导航推送（“登录页面”）；
}
});
}
}

---

谢谢大家!

这里的问题是，

onAuthStateChanged

返回一个

订阅

，这意味着当身份验证状态更改时（例如，成功注销后），将再次调用该订阅。为了解决这个问题，您需要取消听众的订阅。根据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("לא מחובר");
    }
    });
  }