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

【问题标题】：constructor not being called on first click - ionic 2第一次单击时未调用构造函数-离子2
【发布时间】：2017-11-13 10:12:17
【问题描述】：

我正在使用 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

【问题讨论】：

我认为您添加此点击事件代码的位置错误，您应该检查 tab ts。有时，当您切换到另一个主页时，它可能不会在内存中释放，因此当您切换回来时，主页构造函数不会运行。
所以你想在每次进入这个页面时检索它？
@tomriddle_1234 我确实用 TabsPage 替换了 HomePage 但仍然没有运气。
@suraj 是的，那太好了。
@PHPDev 检查我的答案

标签： angular ionic2

【解决方案1】：

如果仅用于登录检查，请使用 Ionic NavControllerlifecyclehook - 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;
            });
    }
}

【讨论】：

又是几乎相同的问题。在应用程序加载时首次工作。但是当我第二次注销时，仍然授予主页访问权限（而不是重定向到登录页面）。
它记录了你的 val 吗？
第一次是，但不是第二次：D。为了能够获得所需的结果，我必须重新点击主页选项卡才能看到登录页面。似乎（我不知道为什么）第一次点击时不会调用 homepage.ts 中的任何内容。但在第二次点击时效果很好。
尝试过其他生命周期钩子吗？ ionViewDidEnterionViewWillEnter?
奇怪的是，它们的行为方式完全相同。首次加载应用程序时，第一次尝试返回 null。但是当我在应用程序中注销并登录时，由于某种原因，我必须重新点击主页才能成功返回 null。

【解决方案2】：

在里面做 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);
                }
            });
    }
}

【讨论】：

不起作用！相同的行为。仅在第二次单击主页选项卡时才将我带到登录页面。
你能创建一个plunker吗