angular - Página en blanco al usar push() o setRoot() dentro de un servicio, Ionic 3

Estoy usando Ionic 3, y tengo algunas funciones que requieren que el usuario esté autenticado, así que cuando un usuario hace clic en un botón, se muestra una alerta. Dado que las funciones están en todo el proyecto, creé una función global que muestra esta alerta, pero cuando pongo dentro de ella push() o setRoot(), el proyecto deja de funcionar y aparece una página en blanco.

import { Injectable, ViewChild } from '@angular/core';
//..............

@Injectable()
export class Alerts {
@ViewChild(Nav) nav: Nav;

constructor(private alertCtrl: AlertController) {
}

mustLogin() {
    let alert = this.alertCtrl.create({
        title: 'must login',
        message: 'go to login ?',
        buttons: [
            {
                text: 'Cancel',
                role: 'cancel',
                handler: () => {
                    console.log('Cancel clicked');
                }
            },
            {
                text: 'Login',
                handler: () => {
                   this.nav.setRoot(LoginPage);
                   //this.nav.push(LoginPage); blank page also
                }
            }
        ]
    });
    alert.present();
}

}

Respuesta #1

Necesitas seguir el código siguiente.

Puedes leer más sobre esto aquí bajo el título Navegando desde un Componente Superpuesto.

constructor(private appCtrl: App){}

Necesitas usar this.appCtrl.getRootNav().setRoot(LoginPage);

en lugar de esto this.nav.setRoot(LoginPage);

Respuesta #2

Esto funciona bien para mí:

import { NavController} from 'ionic-angular';  
constructor(public navController: NavController) {  
   this.navController = avController 
} 
this.navController.push(pageName,{param1:'param1', param2:'param2'});

this.navController.setRoot(pageName);