angular - 在服务中使用 push() 或 setRoot() 时出现空白页，Ionic 3

Question

我正在使用 Ionic 3 ，并且我有一些功能需要用户进行身份验证，因此当用户点击按钮时，会显示一个警报。由于功能遍布整个项目，因此我创建了一个全局函数来显示此警报，但是当我将其放入 push() 或 setRoot() 时，项目停止工作并出现空白页。

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

Answer 1

您需要遵循以下代码。

您可以阅读更多about it here在 Navigating from an Overlay Component 标题下。

constructor(private appCtrl: App){}

您需要使用 this.appCtrl.getRootNav().setRoot(LoginPage);

代替这个this.nav.setRoot(LoginPage);