web-dev-qa-db-fra.com

Ionic 2 - Désactiver le menu latéral dans la page de connexion

J'ai l'intention de désactiver le geste de glissement pour le menu latéral dans la page de journalisation . Le seul changement que j'ai apporté consiste à importer MenuController et à définir swipeEnable sur false dans le constructeur.

Cependant, après l'avoir exécuté, une erreur de syntaxe persiste: jeton inattendu (18:47) lors de l'analyse du fichier. 

import {App, Page, NavController, Nav,NavParams, IonicApp, Storage, LocalStorage, MenuController } from 'ionic-angular';
import {httpService} from '../../services/httpService';
import {HelloIonicPage} from '../hello-ionic/hello-ionic';
import {GettingStartedPage} from '../getting-started/getting-started';
import {SettingsPage} from '../settings/settings';

@Page({
  templateUrl: 'build/pages/log-in/log-in.html',
  providers: [httpService]
})

export class LoginPage {

  static get parameters(){
     return [[NavController],[httpService],[MenuController]];
   }

   constructor(navController, httpService, menu: MenuController) {

     this.menu = menu;
     this.navController = navController;
     this.httpService = httpService;
     this.local = new Storage(LocalStorage);
     this.menu.swipeEnable(false);
   }
}

Merci d'avance.

angularionic2
12
R Chieh

Günter des commentaires devrait être correct. Le constructeur devrait être:

constructor(navController, httpService, menu) {...}

Lorsque vous utilisez pls es6 javascript, vous devez déclarer vos injectables dans la fonction static get parameters () . Ensuite, dans le constructeur, vous déclarez le nom de variable qui représente chaque élément injectable dans le même ordre que vous avez déclaré les éléments injectables dans le tableau renvoyé. La syntaxe des deux points est utilisée lorsque vous utilisez TypeScript et est ensuite transpilée en notation JavaScript es6 simple. En d'autres termes, la syntaxe des deux points est un sucre syntaxique disponible uniquement si votre application est configurée pour gérer TypeScript.

3
Pat Murray

Ce qui suit a fonctionné pour moi sur Ionic2 v.2.2.0

  1. Ouvrez src/app/app.html et ajoutez un identifiant à votre élément <ion-menu>

Pour que ça,

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

Devient ceci.

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

  1. Ouvrez login.html et supprimez le code <ion-navbar> de <ion-header> afin que le menu ne s'affiche pas sur la page.

  2. Ouvrez login.ts et importez la MenuController à partir de ionic/angular.

Dans le constructeur, définissez enable() sur MenuCtrl sur false et ajoutez l'ID de menu comme deuxième paramètre. Même si le menu ne s'affiche pas, cela empêchera l'utilisateur de glisser pour ouvrir le menu.

Exemple login.ts

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

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {

  constructor(
    public navCtrl: NavController,
    public menuCtrl: MenuController
  ) {
    this.menuCtrl.enable(false, 'myMenu');
  }
}
12
timgavin
import {  MenuController } from 'ionic-angular';

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


ionViewDidEnter() {
    // the root left menu should be disabled on this page
    this.menu.enable(false);
  }

  ionViewWillLeave() {
    // enable the root left menu when leaving this page
    this.menu.enable(true);
  }

cela cachera le menu

5
Athul Raj

Avec Ionic v3.5.3 
1. Menu latéral: src/app/app.html<ion-menu [content]="content" id="menuId">
2. Dans le login.html
- importer MenuController
- dans le constructeur: 

constructor(
    public navCtrl: NavController, public menuCtrl: MenuController) {
    this.menuCtrl.enable(false, 'menuId');
    // => menuId is the optional param
}

Lire la suite

0
Mi.HTR