Ionic 4 / Boucles angulaires dans l'historique des routeurs

En gros, vous essayez de personnaliser le comportement du bouton de retour du navigateur. Vous pouvez essayer quelque chose comme l'article mentionné ci-dessous Javascript: modifier la fonction du bouton de retour du navigateur

Le problème avec le ion-back-button est qu'il n'utilise pas le History API , mais accède à un état précédent à la place. C'est pourquoi vous avez noté le comportement suivant:

• Revenez à la page 2 en cliquant une fois sur le ion-back-button qui sous le capot déclenche une navigation vers la page 2
• Revenir à la page 3, en cliquant une fois sur le bouton retour du navigateur depuis la navigation précédente était la page 3

Il vous faut donc que votre bouton se comporte comme le bouton de retour du navigateur.

Pour ce faire, oubliez la directive ion-back-button et implémentez vous-même le comportement click en utilisant Location :: back () .

vous pouvez utiliser ce plugin https://github.com/ionic-team/cordova-plugin-ionic- webview Ce plugin facilite l'utilisation du routage de style HTML5 auquel les développeurs Web s'attendent pour créer des applications d'une seule page.

Voici comment j'ai résolu le problème de boucle de routeur sur Ionic 4. Je connais et j'ai déjà implémenté la célèbre solution de contournement du bouton retour dans Ionic 3, mais cela ne fonctionnera pas sur Ionic 4 car il utilise le routage angulaire.

Donc Je cherchais un moyen d'obtenir l'instance de vue actuellement active. Si j'obtiens l'instance de vue, alors je peux appeler une fonction backButtonAction définie sur cette page (similaire à la solution de contournement Ionic 3).

D'accord, assez de bavardage. voici le code:

app.component.ts

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

et si vous avez un flux de navigation utilisateur comme celui-ci HomePage => Page1 => Page2 définir la fonction onBackButtonPress sur chaque like (tout comme la solution de contournement pour Ionic 3).

exemple: sur HomePage

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

sur Page1^

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       
             }
          });
       }); 
    }