第一次单击时未调用构造函数 - 离子 2

Question

我正在使用 Ionic 2 选项卡模板来创建应用程序。我想在每次用户点击其中一个选项卡时调用用构造函数编写的代码。但是，目前第一次点击时不会发生这种情况。但是当我进行第二次单击时，构造函数代码被正常调用。知道为什么吗？

export class HomePage {
    data = {};
    constructor(public http: Http,
                public navCtrl: NavController,
                private authService: AuthService,
                private storage: Storage,
    ) {
        this.storage.get('email')
            .then((val) => {
            console.log(val);
                if(val === null) {
                    this.navCtrl.setRoot(LoginPage);
                }
            });
    }
    }
}

注销功能

logout() {
        this.storage.remove('email')
            .then((val) => {
                console.log('logged out successfully!');
            })
    }

离子信息：

全球套餐：

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.4.0

本地包：

@ionic/app-scripts              : 1.1.4
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.1.2 ios 4.1.1
Ionic Framework                 : ionic-angular 2.3.0

系统：

Node       : v7.10.0
OS         : OS X El Capitan
Xcode      : Xcode 8.2.1 Build version 8C1002 
ios-deploy : 1.9.1 
ios-sim    : 5.0.13 
npm        : 4.2.0 

Answer 1

在 ngOnInit 内执行

export class HomePage  implements OnInit {
    data = {};
    constructor(public http: Http,
                public navCtrl: NavController,
                private authService: AuthService,
                private storage: Storage,
    ) {}
    ngOnInit() {
    this.storage.get('email')
            .then((val) => {
            console.log(val);
                if(val === null) {
                    this.navCtrl.setRoot(LoginPage);
                }
            });
    }
}

Answer 2

使用 Ionic NavController 生命周期钩子 - 如果仅用于登录检查，则ionViewDidEnter或ionViewCanEnter。

ionViewDidEnter：

在页面完全进入并且现在是活动页面时运行。将触发此事件，无论是首次加载还是缓存页面。

ionViewCanEnter (NavGuard(：

在视图可以进入之前运行。这可以用作经过身份验证的视图中的一种"保护"，您需要在视图进入之前检查权限

export class HomePage {
    data = {};
    constructor(public http: Http,
                public navCtrl: NavController,
                private authService: AuthService,
                private storage: Storage,
    ) {}
    ionViewCanEnter(){
         return this.storage.get('email')
            .then((val) => {
            console.log(val);
            return val;
            });
    }
}