web-dev-qa-db-ja.com

Ionic 2-ログインページのサイドメニューを無効にする

ログインページのサイドメニューのスワイプジェスチャーを無効にするつもりです。私が行った唯一の変更は、MenuControllerをインポートし、コンストラクターでswipeEnableをfalseに設定することです。

しかし、それを実行した後、構文エラーが発生し続けます：ファイルの解析中に予期しないトークン（18:47）。

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

前もって感謝します。

angularionic2
12
R Chieh

コメントのギュンターは正しいはずです。コンストラクタは：

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

プレーンなes6 javascriptを使用する場合、注入可能オブジェクトをstatic get parameters（）関数で宣言する必要があります。次に、コンストラクターで、返された配列で注入可能オブジェクトを宣言したのと同じ順序で各注入可能オブジェクトを表す変数名を宣言します。コロン構文は、TypeScriptを使用するときに使用され、後でプレーンes6 javascript表記に変換されます。つまり、コロン構文は、アプリがTypeScriptを処理するように構成されている場合にのみ使用できる構文上の砂糖です。

3
Pat Murray

以下はIonic2 v.2.2.0で私のために働きました

  1. _src/app/app.html_を開き、IDを_<ion-menu>_要素に追加します

これで

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

これになります。

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

  1. _login.html_を開き、_<ion-navbar>_コードを_<ion-header>_から削除して、メニューがページに表示されないようにします。

  2. _login.ts_を開き、MenuControllerを_ionic/angular_からインポートします。

コンストラクターでenable()をMenuCtrlにfalseに設定し、2番目のパラメーターとしてメニューIDを追加します。メニューが表示されていなくても、これを行うと、ユーザーがスワイプしてメニューを開くことができなくなります。

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');
  }
}
_
13
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);
  }

これでメニューが非表示になります

5
Athul Raj

With Ionic v3.5.3
1。サイドメニュー：src/app/app.html<ion-menu [content]="content" id="menuId">
2。の中に login.html
-インポートMenuController
-コンストラクタで：

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

続きを読む

0
Mi.HTR