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

Question

我的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);
    }
}

和auth服务中的signtout方法命名为authenticate:

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

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

<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;

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

Answer 1

您正在调用AuthPage来注销，这就是为什么您不能注销并且在 AuthPage 的构造函数内您不调用 logOut 函数。

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

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

这是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
     ];
  }
}

这是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);
  }

}