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

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.