Как я могу установить корневую страницу вне вкладок, которые не удерживают вкладки на месте?

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

После публикации я нашел ответ на форумах Ionic.

По сути, каждая вкладка поддерживает свой собственный стек навигации, о котором я знал, но ожидал setRoot обойти стек. Логически это не так.

Вместо этого вам нужно позвонить getRootNav().setRoot() на ваше App,

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

}

Answer 2

Вы можете использовать Angular router и перемещать пользователя на страницу входа после нажатия кнопки выхода.

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

Установите надлежащие средства защиты маршрутизации, чтобы пользователь не мог получить доступ к маршруту, если он не вошел в систему. https://angular.io/guide/router