Ionic 3+: how to navigate away from tabbed interface?

Question

My Ionic application first loads LoginComponent and when user successfully logs in, loads the main TabsComponent view which allows to switch between corresponding child views.

I am trying to make it load standalone LoginComponent without tabbed interface, and that is not working (once switched to TabsComponent, I cannot navigate away from tabbed interface).

I've tried following commands from under one of TabsComponent child views:

this.navCtrl.push(LoginComponent);      // Loads as a child view
this.navCtrl.setRoot(LoginComponent);   // Loads as a child view
this.navCtrl.popAll();                  // Error: navigation stack needs at least one root page
this.navCtrl.popTo(LoginComponent);     // Error: navigation stack needs at least one root page

I've went through Ionic documentation many times but I haven't found an answer to this question. What am I missing?

Answer 1

I've solved this by injecting TabsComponent into it's child component, and then calling this.navCtrl.setRoot(LoginComponent); in a function inside TabsComponent:

// Child class of TabsComponent (loaded via tab click)
export class SettingsComponent {
    constructor(@Inject(forwardRef(() => TabsComponent)) private tabsComponent: TabsComponent) {
    }

    logOut(): void {
        this.tabsComponent.switchToLoginPage():
    }
}

And switchToLoginPage on TabsComponent:

import {Component, forwardRef, Inject} from '@angular/core';
// ... 
export class TabsComponent {
    constructor(private navCtrl: NavController) {
    }

    switchToLoginPage(): void {
        this.navCtrl.setRoot(LoginComponent);
    }
}

Based on this example: How do I inject a parent component into a child component?

If there is a better way I'd love to know about, otherwise hope this solution would help anyone.