Вот как я исправил проблему зацикливания маршрутизатора на Ionic 4. Я знаю и ранее реализовал известный обходной путь с кнопками возврата в Ionic 3, но это не сработает на Ionic 4, поскольку он использует угловую маршрутизацию.
Итак, я искал способ получить экземпляр активного в данный момент вида.Если я получу экземпляр представления, то я смогу вызвать некоторую функцию backButtonAction, определенную на этой странице (аналогично обходному решению Ionic 3).
Хорошо, достаточно чата.вот код:
app.component.ts
export class AppComponent {
@ViewChildren(IonRouterOutlet) routerOutlets:QueryList<IonRouterOutlet>;
constructor(
private alertCtrl:AlertController,
private modalCtrl:ModalController,
private actionSheetCtrl: ActionSheetController,
private menu:MenuController,
private platform: Platform
){
this.initializeApp();
}
initializeApp(){
...
this.registerHardwareBackButton();
}
registerHardwareBackButton() {
this.platform.backButton.subscribe((e) => {
e.register(999, async () => {
// first close any alets, modal etc.
const actionsheet = await this.actionSheetCtrl.getTop();
if(actionsheet){
actionsheet.dismiss();
return;
}
const modal = await this.modalCtrl.getTop();
if(modal){
modal.dismiss();
return;
}
const alert = await this.alertCtrl.getTop();
if(alert){
alert.dismiss();
return;
}
const menu = await this.menu.getOpen();
if(menu){
menu.close();
return;
}
const outlet:any = this.routerOutlets.first();
const activeView = outlet.activated.instance; // the active view instance
//now calls the onBackButtonPress function in that instance
if(activeView.onBackButtonPress){
activeView.onBackButtonPress();
}else {
//some logic about what to do if onBackButtonPress is not defined, default action
}
});
});
}
и если у вас есть пользовательский поток навигации, такой как HomePage => Page1 => Page2 define onBackButtonPress функция для каждого лайка (как обходной путь для Ionic 3).
пример: на HomePage
onBackButtonPress(){
navigator['app'].exitApp(); //closes the app, bad UX
}
на Page1
onBackButtonPress(){
//back to previous page using location.back() or nav.pop()
this.location.back();
}