web-dev-qa-db-fra.com

Désactiver le balayage pour afficher le menu latéral ionic 2

J'utilise un sidemenu ionic 2. lorsque je glisse cette page de gauche à droite, le menu latéral glisse vers le haut, j'ai besoin de désactiver le glissement sidemenu dans une page particulière.

app.html

    <ion-menu [content]="content">
     <ion-content>
      <ion-list>
       <button ion-item *ngFor="let p of pages" menuClose (click)="openPage(p)" >
        <ion-icon name="{{p.icon}}" item-left></ion-icon>
        {{p.title}}
      </button>
     </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="true"></ion-nav>

page.html Je suis allé désactiver le swipemenu dans cette page, désactiver uniquement lorsque je glisse

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/portrait/portrait.html'
})
export class Portrait {
}

page.html

<ion-navbar persianred *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
   Portrait
  </ion-title>
</ion-navbar>
angulartypescriptionic-frameworkionic2ionic3
23
sridharan

Il existe plusieurs façons de le faire, selon l'endroit où vous souhaitez désactiver le menu:

  1. Désactivez-le sur une seule page
  2. Désactivez-le sur certaines pages (sans répéter le même code encore et encore)
  3. Désactivez-le dans toutes les pages

1) Désactivez-le sur une seule page

Si vous souhaitez désactiver le balayage pour afficher sur une seule page, le moyen le plus simple serait d'injecter l'instance MenuController et d'utiliser la méthode swipeEnable(shouldEnable, menuId) (Documents ioniques).

import { NavController, MenuController } from 'ionic-angular/index';
import { Component } from "@angular/core";

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  constructor(private menu: MenuController, ...) { }

  ionViewDidEnter() {
    this.menu.swipeEnable(false);

    // If you have more than one side menu, use the id like below
    // this.menu.swipeEnable(false, 'menu1');
  }

  ionViewWillLeave() {
    // Don't forget to return the swipe to normal, otherwise 
    // the rest of the pages won't be able to swipe to open menu
    this.menu.swipeEnable(true);

    // If you have more than one side menu, use the id like below
    // this.menu.swipeEnable(true, 'menu1');
   }

}

Veuillez noter deux choses:

1) Si vous utilisez l'identifiant, vous devrez ajouter ce id à votre menu:

<ion-menu [content]="content" side="left" id="menu1">

2) Vous avez besoin que la vue soit déjà chargée pour pouvoir désactiver le menu, donc une façon de le faire est d'utiliser l'événement ionViewDidEnter.

2) Désactivez-le sur certaines pages

Si vous souhaitez désactiver le menu latéral sur certaines pages (comme la page de connexion/enregistrement) mais que vous ne voulez pas injecter le MenuController sur chacune de ces pages, puis gérer le ionViewDidEnter/ionViewWillLeave, vous pouvez utiliser un décorateur personnalisé . Jetez un œil à this SO answer for more information.

3) Désactivez-le dans toutes les pages

Si vous souhaitez désactiver le balayage pour afficher partout dans votre application, le moyen le plus simple serait d'utiliser la propriété d'entrée swipeEnabled (Ionic docs):

<ion-menu [content]="content" [swipeEnabled]="false">...</ion-menu>
67
sebaferreras

Vous pouvez utiliser la méthode enable de MenuController pour activer/désactiver le menu d'une page particulière.

Activez l'appel avec l'ID de menu lorsque vous ouvrez la page et désactivez-la lorsque vous vous en éloignez. Vous pouvez omettre l'ID de menu si vous avez une seule instance de menu dans votre application.

Source

2
Abhishek Jain

meilleur et facile

dans app.component.ts file

changement

<ion-menu [content]="content">

à <ion-menu [content]="content" hidden>

C'est tout, il cachera le menu latéral

2
Apoorv

Sur la base de cette option "swipeEnabled", ce que j'ai fait a été de définir un conditionnel à l'aide d'une variable booléenne.

<ion-menu [content]="content" [swipeEnabled]="(userLogged) ? true : false">

Cela a très bien fonctionné pour moi.

Juste un conseil: peut-être que n'importe qui remarque que dans le cas où la variable n'est pas globale, l'application restera sans glisser même après avoir sauté sur une autre page. Cependant, au-delà de définir le variabel comme global, cela résoudra, après que l'utilisateur ait fermé et rouvert l'application, le balayage fonctionnera normalement.

1
Lud Akell

la réponse simple et la meilleure va ici ...

Dans votre homepage.ts,

  constructor(private menu: MenuController) { }

  ionViewDidEnter(){
    this.menu.swipeEnable(true);
  }

  ionViewWillLeave(){
    this.menu.swipeEnable(false);
  }

Ce qui désactivera le balayage dans toutes les autres pages sauf la page d'accueil.

1
Upendra

Dans mon cas, ce qui a fonctionné était d'ajouter [swipeEnabled]="false" au menu ion. De cette façon, je peux afficher le menu latéral uniquement lorsque vous cliquez sur l'icône de menu. Ceci est basé sur Ionic 2 documentation: Men .

1
UO Man