In order to manage navigation in our app, we have chosen to utilize the Angular router instead of the Ionic navigation controller.
One challenge we are facing is handling navigation using the Android back button. When working with the Ionic framework, pressing the Android hardware back button triggers global ion-back-button events. Since we are not using the Ionic navigation controller, these events are only triggered by pressing the hardware back button. To address this, I have set up a global listener for ion-back-button events, which uses a navigation service to handle page-to-page navigation. The tricky part is ensuring that popups are closed before initiating page navigation.
The handler function in the app component looks like this:
backButtonEvent() {
this.platform.backButton.subscribeWithPriority(10, () => {
if (!this.modalService.remove()) {
const backUrl = this.backService.getBackURL();
if (
!backUrl.includes("dataload") /*previous page is not dataload*/ &&
!backUrl.includes("login") /*previous page is not login */ &&
!this.navCtrl.url.includes("dataload") /*current page is not dataload */ &&
!this.navCtrl.url.includes("login") /*current page is not login */
) {
this.navCtrl.navigateByUrl(backUrl);
}
}
});
}
And here is an example of how most modals in the app are structured:
async showInformationModal() {
const modalData: BasicModalData = {
generic text: "text"
};
const infoModal = await this.modalController.create({
component: BasicModalComponent,
componentProps: {
modalData
},
backdropDismiss: true,
showBackdrop: true,
cssClass: "modalClass"
});
return infoModal.present();
}
To improve this setup, it may be beneficial to create a modal service with a function that can emit a "dismissed: true" property for the infoModal. However, the implementation of this is still uncertain.