[英]Hardware back button closes the app on Tab enabled Ionic 3 app
当用户点击my profile
页面(或标签页)时,用户没有登录,然后显示login page
,如下所示。在login page
,它有header back button
,它工作正常(你可以看到下面的代码)当用户点击hardware back button on Android device
的hardware back button on Android device
时,我需要相同的功能。但它关闭了应用程序。你能告诉我如何解决这个问题吗? 如果您需要更多信息,请告诉我。
我-profile.ts
constructor(public navCtrl: NavController, public app: App, public userService: UserService
) {
if (!this.userService.userDetails) {
this.app.getRootNav().setRoot('Login', { profile: true });
return;
}
}
login.ts
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.profile = this.navParams.data.profile;
}
back() {
if (this.profile) {//not logged in user
this.navCtrl.setRoot('TabsPage');
}
}
的login.html
<ion-header>
<ion-navbar>
<ion-buttons left>
<button ion-button *ngIf="profile" (click)="back()" tappable><ion-icon name="arrow-back"></ion-icon></button>
</ion-buttons>
<ion-title>login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
您可以使用Platform的registerBackButtonAction()
方法来处理用户按下本机后退按钮的时间。
import { Platform } from 'ionic-native';
...
constructor(public platform: Platform){
platform.registerBackButtonAction(() => {
if (navCtrl.canGoBack()) { // CHECK IF THE USER IS IN THE ROOT PAGE.
navCtrl.pop(); // IF IT'S NOT THE ROOT, POP A PAGE.
} else {
platform.exitApp(); // IF IT'S THE ROOT, EXIT THE APP.
}
});
}
但是这里的情况是你正在设置root而不是推送页面,所以这是Ionic的正常行为,当在root页面中没有任何内容可以弹出时,应用程序将被关闭。
在这种情况下,您可以在login.ts上执行类似的操作
platform.registerBackButtonAction(() => {
this.back();
});
因此,每当用户进入登录页面并点击硬件后退按钮时,它只需调用您的back()
方法,即将根设置为另一个页面。
希望这可以帮助。
只需在导入的app.module.ts
文件app.module.ts
属性navExitApp
设置为false
app.module.ts
IonicModule.forRoot(YourApp, {
navExitApp: false
}),
简单! 您无需触摸registerBackButtonAction事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.