typescript - 如何删除 Ionic 2 中除登录 View 之外的所有 View ？

Question

我制作了一个带标签的 ionic 2

ionic starts project1 tabs --v2

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

ionic g provider authService
ionic g page loginPage

我在登录成功后设置为root:

this.nav.setRoot(TabsPage)

导航到主页。我在注销时设置了 root:

this.nav.setRoot(LoginPage)

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

如何在注销时销毁所有页面并隐藏选项卡面板？

Answer 1

我尝试创建一个与您类似的项目，并在登录页面中添加了一个登录按钮。点击事件绑定(bind)到:

this.navCtrl.setRoot(TabsPage);

在TabsPage组件中，尝试使用App Controller 如下:

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>