实施tabmenu后，Angularfire auth注销方法无效

I have a logout function in my app.component.ts which looks like this:

我的app.component.ts中有一个注销功能，如下所示：

export class MyApp {
    @ViewChild(Nav) nav: Nav;

    constructor(){
       this.accountMenuItems = [
          { title: 'Login', component: AuthPage, icon: 'log-in' },
          { title: 'My Account', component: MyAccountPage, icon: 'contact' },
          { title: 'Logout', component: AuthPage, icon: 'log-out' },
       ];
    }

    logOut() {
       this.authenticate.signOut();

       //THIS BELOW ISN"T NEEDED WHEN I COMMENT OUT THE TABMENU
       this.nav.setRoot(this.accountMenuItems[2].component);
    }
}

and the signtout method in the auth service named authenticate:

以及名为authenticate的auth服务中的signtout方法：

signOut(): Promise<void> {
    return this.afAuth.auth.signOut();
}

But when I execute this function with tab menu it isn't signing out anymore I noticed when I outcomment the tab menu it is working here is the tab menu:

但是，当我使用选项卡菜单执行此功能时，它不再退出了我注意到当我退出选项卡菜单时，它在这里工作的是选项卡菜单：

<ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>

<ion-tabs>
    <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="search"></ion-tab>
    <ion-tab [root]="tab3Root" tabIcon="map"></ion-tab>
    <ion-tab [root]="tab4Root" tabIcon="bookmark"></ion-tab>
</ion-tabs>

tab1Root = HomePage;
tab2Root = RestaurantListPage;
tab3Root = NearbyPage;
tab4Root = FavoriteListPage;

When I comment out the tabs, it is working probably because I have two activeNavs?

当我注释掉标签时，可能是因为我有两个activeNavs？

1 个解决方案

#1

You are calling AuthPage to logOut, that's why You can not logOut and inside constructor of AuthPage You do not call a logOut function.

您正在调用AuthPage logOut，这就是为什么您不能logOut和AuthPage的内部构造函数您不调用logOut函数。

constructor(){
       this.accountMenuItems = [
          { title: 'Logout', component: AuthPage, icon: 'log-out' }, 
       ];
    }

To work your LogOut function, You can do this way. Create LogOutPage and inside the constructor call the logOut Function.

要使用LogOut功能，您可以这样做。创建LogOutPage并在构造函数内部调用logOut函数。

This is app.component.ts file

这是app.component.ts文件

import { LogoutPage } from '../pages/logout/logout'; //import logout Page

export class MyApp {
@ViewChild(Nav) nav: Nav;

  constructor(){
     this.accountMenuItems = [
        { title: 'Login', component: AuthPage, icon: 'log-in' },
        { title: 'My Account', component: MyAccountPage, icon: 'contact' },
        { title: 'Logout', component: LogoutPage, icon: 'log-out' }, // calling logout Page
     ];
  }
}

This is logout.ts file

这是logout.ts文件

import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';
import { LoginPage } from '../pages/login/login';

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

  constructor(public navCtrl: NavController) {
    //call signOut() method here using your auth provider
    this.nav.setRoot(LoginPage);
  }

}

#1