当我们在Ionic应用程序中将登录主页移动到主页时，如何禁用"后退"按钮

Question

嗨，我是 Ionic 应用程序开发的新手，登录后的每个应用程序中，我们都会转到仪表板屏幕，那里没有显示后退按钮，如果用户按下后退按钮，我们只是在杀死应用程序，我们如何在 Ionic 应用程序中做到这一点，有人可以帮我吗

登录：

export class LoginPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
logToHomePage() {
this.navCtrl.push(HomePage);
}
}

主页：-

export class HomePage {
@ViewChild(Nav) nav: Nav;
// make UsersPage the root (or first) page
rootPage: any = DashboardTabsPage;
pages: Array<{ title: string, icon: string, component: any, openTab? : any }>;
constructor() {
// set our app's pages
this.pages = [
{ title: 'DashBoard',icon: 'home', component: DashboardTabsPage},
{ title: 'List', icon: 'home',component: ListsTabsPage },
{ title: 'NoTabs', icon: 'home',component: NoTabsPage },
];
}
openPage(page) {
// navigate to the new page if it is not the current page
this.nav.setRoot(page.component,{ openTab: page.openTab });
}
}

Answer 1

您只需要将hideBackButton添加到 html 中即可隐藏后退按钮。

例：

<ion-navbar hideBackButton>

您可以使用任何按钮关闭应用程序。 在 yout HTML 中：

<button (click)="exitApp()">Close<button> //or you can just name it whatever you want or just put some icon

在您的 .ts 中：

import { Platform } from 'ionic-angular';
constructor(public plt: Platform) {}
exitApp(){
this.plt.exitApp();
}

Answer 2

您可以使用Platform Ionic API的registerBackButtonAction方法覆盖后退按钮。

https://ionicframework.com/docs/api/platform/Platform/#registerBackButtonActionç

例如，在 .ts 文件的构造函数中：

constructor(public platform: Platform, public alertCtrl: AlertController) {
platform.ready().then(() => {
platform.registerBackButtonAction(() => {

const alert = this.alertCtrl.create({
title: 'App termination',
message: 'Do you want to close the app?',
buttons: [{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Application exit prevented!');
}
},{
text: 'Close App',
handler: () => {
this.platform.exitApp(); // Close this application
}
}]
});
alert.present();
}
}
});