web-dev-qa-db-fra.com

Ionic 3 activer le balayage arrière pour une seule page

J'ai désactivé l'option de «balayage arrière» globalement, à la fois dans la configuration du composant racine et du module

<ion-nav #appNav [root]="rootPage" swipeBackEnabled="false"></ion-nav>

...
IonicModule.forRoot(MobileApplication, {swipeBackEnabled: false}),
...

J'ai cependant besoin de l'activer pour une seule page. Nous essayons donc de le définir en transmettant une instance de navigation au constructeur, puis en définissant swipeBackEnabled sur true.

ionViewWillEnter() {
    this.nav.swipeBackEnabled = true;
    console.log('swipeBackEnabled ' + this.nav.swipeBackEnabled);
    console.log('canGoBack ' + this.nav.canGoBack());
    console.log('canSwipeBack ' + this.nav.canSwipeBack());
}

Journalisation de swipeBackEnabled et de canGoBack renvoie true, mais canSwipeBack renvoie false. Si j'ajoute un événement de balayage quelque part dans mon modèle et que je consigne ces valeurs lors du balayage droit, toutes les valeurs sont consignées comme étant vraies. Cependant, rien ne se passe, semble-t-il comme si glisser ne fonctionnait pas? Est-ce que je manque quelque chose?

Pour référence, j'utilise Ionic 3.9.2 et @ ionic/app-scripts 3.1.4. Merci d'avance

angularionic-frameworkionic2
6
vitalym

Je ne suis pas tout à fait sûr de ce qui a fait le tour ici, mais la configuration suivante l'a fait fonctionner pour moi:

public ionViewWillEnter(): void {
    this.appNav.swipeBackEnabled = true;
}

public ionViewDidLeave(): void {
    this.appNav.swipeBackEnabled = false;
}

appNav est ici une instance de NavController ionique. Je ne comprends pas encore tout à fait pourquoi la configuration de swipeBackEnabled dans d'autres hooks de cycle de vie n'a pas abouti, alors je vais continuer à enquêter plus tard. Cela pourrait être un point de départ pour quelqu'un qui pourrait rencontrer le même problème cependant.

3
vitalym

pour ce faire, créez un identifiant pour votre menu ionique, comme je l’ai indiqué dans le menu principal. pour y accéder dans votre contrôleur.

app.html 

<ion-menu [content]="appNav" id="main-menu">
....
....
</ion-menu>
<ion-nav #appNav [root]="rootPage" swipeBackEnabled="false"></ion-nav>

dans votre fichier app.component.ts, placez le code ci-dessous dans votre constructeur.

  menuCtrl.swipeEnable(false, 'main-menu');

de sorte que le code ci-dessus agit en désactivant le balayage du menu latéral pour ouvrir la fonctionnalité à travers toute l'application.

disons que vous souhaitez activer le balayage pour ouvrir le menu latéral sur une seule page, ajoutez donc le code ci-dessous.

this.menuCtrl.swipeEnable(true, 'main-menu');

cela permettra au balayage d'ouvrir la fonctionnalité du menu latéral.

Remarque: Une fois que vous avez utilisé swipeEnable (true, 'main-menu'); ce sera en mesure d'accéder à l'ensemble de l'application. Afin de résoudre ce problème, utilisez uniquement une page et désactivez la page précédente et la page suivante sera respectée.

ne l'activez que sur la page en cours et désactivez-le sur les pages avant et arrière de cette page

METTRE À JOUR:

une autre façon d’y parvenir est de l’activer et de le désactiver sur la même page.

ionViewDidEnter(){
    this.menuCtrl.swipeEnable(true, 'main-menu');
}

et le désactiver sur la même page en utilisant ionviewdidleave

ionViewDidLeave(){
    this.menuCtrl.swipeEnable(false, 'main-menu');
}

Donc, le code ci-dessus va faire les deux méthodes activant et désactivant le menu latéral

1
Mohan Gopi