web-dev-qa-db-ja.com

スワイプを無効にしてサイドメニューを表示ionic 2

私はサイドメニューを使用していますionic 2.このページを左から右にスワイプすると、サイドメニューがスライドアウトします。特定のページでサイドメニューのスワイプを無効にする必要があります。

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このページでスワイプメニューを無効にしました。スワイプしたときのみ無効にします

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

メニューを無効にする場所に基づいて、これを行う方法がいくつかあります。

  1. 1ページだけで無効にする
  2. 一部のページで無効にします（同じコードを何度も繰り返さずに）
  3. すべてのページで無効にします

1）1ページだけで無効にする

スワイプを無効にして1ページだけを表示する場合、最も簡単な方法はMenuControllerインスタンスを挿入し、swipeEnable(shouldEnable, menuId)メソッドを使用することです（Ionic docs）。

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

}

次の2つに注意してください。

1）idを使用する場合、メニューにidを追加する必要があります。

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

2）メニューを無効にするには、ビューが既にロードされている必要があるため、ionViewDidEnterイベントを使用する方法があります。

2）一部のページで無効にします

一部のページ（ログイン/登録ページなど）でサイドメニューを無効にしたいが、それらの各ページにMenuControllerを挿入してからionViewDidEnter /を処理したくない場合ionViewWillLeave、Custom Decoratorを使用できます。詳細については、this SO answerをご覧ください。

3）すべてのページで無効にします

スワイプを無効にしてアプリのすべての場所を表示する場合、最も簡単な方法はswipeEnabled入力プロパティ（Ionic docs）：

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

enableのMenuControllerメソッドを使用して、特定のページのメニューを有効/無効にすることができます。

ページを開いたときにメニューIDを使用してenableを呼び出し、ページから離れるときに無効にします。アプリに単一のメニューインスタンスがある場合は、メニューIDを省略できます。

ソース

2
Abhishek Jain

最良かつ簡単

app.component.ts file

変化する

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

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

それは、サイドメニューを非表示にします

2
Apoorv

その「swipeEnabled」オプションに基づいて、ブール変数を使用して条件を設定しました。

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

それは私にとって素晴らしい仕事でした。

アドバイス：変数がグローバル変数ではない場合、別のページにジャンプした後でもアプリはスワイプせずに留まることに気付く人がいるかもしれません。ただし、variabelをグローバルとして設定するだけでなく、ユーザーがアプリを閉じて再度開いた後も、スワイプは正常に機能します。

1
Lud Akell

シンプルでベストな答えがここにあります...

Homepage.tsで、

  constructor(private menu: MenuController) { }

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

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

これにより、ホームページを除く他のすべてのページでのスワイプが無効になります。

1
Upendra

私の場合、うまくいったのは[swipeEnabled]="false"イオンメニューへ。これにより、メニューアイコンがクリックされたときにのみサイドメニューを表示できます。これはIonic 2ドキュメント： Men に基づいています。

1
UO Man