如何删除Ionic 2中除登录视图以外的所有视图？

Question

我做了一个带有标签的离子2

ionic starts project1 tabs --v2

然后我添加了一个页面和一个提供者:

ionic g provider authService
ionic g page loginPage

登录成功后我设置了root:

this.nav.setRoot(TabsPage)

它导航到HomePage.我在注销时设置了root:

this.nav.setRoot(LoginPage)

问题是当我退出选项卡面板时仍然出现并且所有页面似乎仍然可以导航到.

当我退出并隐藏选项卡面板时,如何破坏所有页面？

Answer 1

我尝试创建一个与您类似的项目,并在登录页面中添加了一个登录按钮.Click事件绑定到:

this.navCtrl.setRoot(TabsPage);

在TabsPage组件中,尝试使用App控制器,如下所示:

import { Component } from '@angular/core';
import { App } from 'ionic-angular';

import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { LoginPage } from '../login-page/login-page';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;

  constructor(public appCtrl: App) {

  }

  logout() {
    this.appCtrl.getRootNav().setRoot(LoginPage);
  }
}

假设我们在tabs.html的导航栏上添加了一个注销按钮,如下所示:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
    <ion-buttons end>
      <button ion-button color="primary" (click)="logout()">Logout</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>