如何在不保留选项卡的选项卡之外设置根页面？

Question

我的应用程序的流程意味着在用户登录之前没有任何选项卡。第一个页面是全屏登录屏幕。登录后，用户将被带到 tabs.ts，其中包含我的标签代码。

其中一个选项卡有一个用于注销用户的按钮：

user.ts:

  // Logout
  logout() {    
    // Log the user out
    this.user.logout();

    // Take user to login screen
    this.navCtrl.setRoot(LoginPage);
  }

我认为将根设置为 LoginPage，它不是任何标签页的一部分，会删除标签。不幸的是没有，标签仍然存在。由于显而易见的原因，这确实存在问题。

如何从这一点删除标签？我觉得我需要潜在地获取选项卡实例并销毁它，但这是一个猜测，我正在努力在文档中找到任何内容。

Answer 1

您可以使用 Angular 路由器并在单击注销按钮后将用户导航到登录页面。

this.router.navigate(["login"]).

放置适当的路由保护，以便用户在未登录的情况下无法访问该路由。 https://angular.io/guide/router

Answer 2

发布后我在 Ionic 论坛上找到了答案。

实际上，每个选项卡都维护自己的导航堆栈，我知道这一点，但我希望 setRoot 绕过堆栈。从逻辑上讲，它不是。

相反，您需要在 App 上调用 getRootNav().setRoot()。

App 从 ionic-angular 导入，然后传递给您的控制器。

一个完整的（虽然被截断了）示例：

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

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

  constructor(
    private app: App
  ) {

  }

  // Logout
  logout() {
    // Take user to login screen
    this.app.getRootNav().setRoot(LoginPage);
  }

}

如何在不保留选项卡的选项卡之外设置根页面？

How can I set a root page outside of tabs that don't keep the tabs in place?

typescript

ionic-framework

ionic2

ionic2-tabs

angular