Website-Suche

typescript - Angularfire Auth-Abmeldemethode funktioniert nach der Implementierung des Tabmenüs nicht

Ich habe in meiner app.component.ts eine Logout-Funktion, die folgendermaßen aussieht:

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

und die Signout-Methode im Auth-Service namens authenticate:

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

Aber wenn ich diese Funktion mit dem Tab-Menü ausführe, wird nicht mehr abgemeldet. Mir ist aufgefallen, dass es funktioniert, wenn ich das Tab-Menü auskommentiere. Hier ist das Tab-Menü:

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

Wenn ich die Tabs auskommentiere, funktioniert es wahrscheinlich, weil ich zwei activeNavs habe?

Antwort #1

Sie rufen AuthPage auf, um sich abzumelden, deshalb können Sie sich nicht abmelden, und im Konstruktor von AuthPage rufen Sie keine Abmeldefunktion auf.

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

Um Ihre Abmeldefunktion zu nutzen, können Sie es auf diese Weise tun. Erstellen Sie LogOutPage und rufen Sie im Konstruktor die logOut-Funktion auf.

Dies ist die app.component.ts Datei

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

Dies ist die logout.ts-Datei

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

}

Verwandte Artikel