web-dev-qa-db-fra.com

Ionic 4 Angular Bouton Retour à la page précédente au lieu de root?)

J'ai un petit Ionic 4 App avec 2 onglets et 1 page de détail. Le problème auquel je suis confronté ici est que si je vais de Tab2 dans la page de détail et de là avec ion-back-button back, il me redirige toujours vers Tab1 au lieu de Tab2 où j'étais auparavant.

Voici mon exemple:

Tab2 Html: Ici, j'ai un élément ionique simple avec un événement de clic:

        <ion-item class="chat-item" (click)='openChat()' >

Il appelle la fonction openChat qui fonctionne comme ceci:

          openChat() {
            this.router.navigateByUrl('/chatdetail/:uid');
          }

Maintenant, il ouvre ma page Chatdetail dans laquelle j'ai placé un bouton Retour pour revenir en arrière comme ceci:

    <ion-header>
      <ion-toolbar>
          <ion-buttons slot="start">
              <ion-back-button></ion-back-button>
           </ion-buttons>
        <ion-title>chatdetail</ion-title>
      </ion-toolbar>
    </ion-header>

Mais lorsque je clique sur ce bouton, il ne fait pas que "faire apparaître" la page comme dans Ionic3, il me dirige vers la page racine de mon application, Tab1.

Existe-t-il un moyen d'écraser cet événement de retour pour revenir à la page que j'étais avant?

angularroutingback-buttonionic4
6
Lukas R.

Vous devez naviguer en tant que

<ion-item class="chat-item" [routerLink]="[/chatdetail, 123]" routerDirection="forward">

routerDirection="forward" empile detailPage sur les pages d'onglets et vous reviendrez à la page d'onglet de droite

:}

1
Mohammad Ayoub Khan

en utilisant nav-control, nous pouvons revenir en arrière comme suit

ajouter public navCtrl: NavController dans le constructeur

back(){
  let animations:AnimationOptions={
    animated: true,
    animationDirection: "back"
  }
  this.navCtrl.back(animations)
}
0
Satish Varre