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

【问题标题】：How can I set a root page outside of tabs that don't keep the tabs in place?如何在不保留选项卡的选项卡之外设置根页面？
【发布时间】：2018-01-16 03:46:21
【问题描述】：

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

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

user.ts:

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

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

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

如何从此时删除标签？我觉得我可能需要抓住标签实例并销毁它，但这是一个猜测，我正在努力在文档中找到任何内容。

【问题讨论】：

你想隐藏登录页面中的标签吗？
请参阅参考链接如何解决问题。 stackoverflow.com/questions/51249315/…

标签： angular typescript ionic-framework ionic2 ionic2-tabs

【解决方案1】：

发布后，我在 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);
  }

}

【讨论】：

没错，this.app.getRootNav().setRoot(LoginPage); 是正确的做法。 +1 :)

【解决方案2】：

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

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

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

【讨论】：

Ionic 使用路由器的自定义实现（NavController），所以这个答案不适合 Ionic。