Петли Ionic 4/Angular в истории маршрутизатора

В основном вы пытаетесь настроить поведение кнопки «Назад» в браузере. Вы можете попробовать что-то вроде приведенной ниже статьи Javascript: изменение функции кнопки «Назад» в браузере.

Проблема с ion-back-button заключается в том, что он использует не История API браузера, а вместо этого переходит в предыдущее состояние. Вот почему вы заметили следующее поведение:

• Вернитесь на страницу 2, нажав один раз на ion-back-button, который под капотом вызывает переход на страницу 2.
• Вернитесь на страницу 3, нажав один раз кнопку «Назад» в браузере, поскольку предыдущая навигация была на странице 3.

Итак, вам нужно, чтобы ваша кнопка вела себя как кнопка «Назад» в браузере.

Для этого забудьте директиву ion-back-button и реализуйте поведение click самостоятельно, используя Местоположение::назад().

вы можете использовать этот плагин https://github.com/ionic-team/cordova-plugin-ionic-webview Этот плагин упрощает использование маршрутизации в стиле HTML5, которую веб-разработчики ожидают для создания одностраничных приложений.

Вот как я исправил проблему зацикливания маршрутизатора в 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 определить функцию onBackButtonPress для каждого лайка (как обходной путь для Ionic 3).

пример: на Домашняя страница

onBackButtonPress(){
    navigator['app'].exitApp(); //closes the app, bad UX
}

на Страница 1

onBackButtonPress(){
    //back to previous page using location.back() or nav.pop()
    this.location.back();
}