사이드 메뉴 ionic 2를 보려면 스와이프 사용 안 함

사이드 메뉴 ionic 2를 보려면 스와이프 사용 안 함

저는 사이드 메뉴 아이콘 2를 사용하고 있습니다. 제가 이 페이지를 왼쪽에서 오른쪽으로 스와이프할 때 사이드 메뉴 슬라이드를 특정 페이지에서 비활성화해야 합니다.

앱.스캐너

    <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 {
}

페이지.책

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

메뉴를 비활성화할 위치에 따라 여러 가지 방법이 있습니다.

1. 한 페이지에서만 사용 안 함
2. 일부 페이지에서 사용 안 함(같은 코드를 반복하지 않고 반복)
3. 모든 페이지에서 사용 안 함

---

한 페이지에서만 사용 안 함

한 페이지에서만 볼 수 있도록 스와이프를 비활성화하려면 가장 쉬운 방법은 다음을 주입하는 것입니다.MenuController인스턴스화 및 사용swipeEnable(shouldEnable, menuId)메소드(이온 문서).

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

}

다음 두 가지 사항에 유의하십시오.

id를 사용하는 경우 추가해야 합니다.id메뉴로:

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

메뉴를 비활성화하려면 보기를 이미 로드해야 하므로, 한 가지 방법은ionViewDidEnter사건의

---

일부 페이지에서 사용 안 함

일부 페이지(예: 로그인/등록 페이지)에서 사이드 메뉴를 사용하지 않도록 설정하고 싶지만 다음을 주입하지 않으십시오.MenuController각각의 페이지에서 그리고 나서 처리합니다.ionViewDidEnter/ionViewWillLeave당신은 커스텀 데코레이터를 사용할 수 있습니다.자세한 내용은 이 SO 답변을 참조하십시오.

---

모든 페이지에서 사용 안 함

앱의 모든 곳을 볼 수 있는 스와이프를 비활성화하려면 가장 쉬운 방법은swipeEnabled입력 속성(Ionic docs):

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

사용할 수 있습니다.enable의 방법MenuController특정 페이지에 대한 메뉴를 활성화/비활성화합니다.

페이지를 열 때 메뉴 ID로 사용을 호출하고 페이지에서 이동할 때 사용하지 않도록 설정합니다.앱에 단일 메뉴 인스턴스가 있는 경우 메뉴 ID를 생략할 수 있습니다.

원천

간단하고 최고의 답은 여기에 있습니다...

당신의 홈페이지.ts에서,

  constructor(private menu: MenuController) { }

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

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

그러면 홈 페이지를 제외한 다른 모든 페이지에서 스와이프가 비활성화됩니다.

아주 쉬운

에app.component.ts file

바꾸다

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

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

이상입니다. 사이드 메뉴를 숨길 것입니다.

내 경우에 효과가 있었던 것은 추가하는 것이었습니다.[swipeEnabled]="false"이온 주입식의이렇게 하면 메뉴 아이콘을 클릭해야만 사이드 메뉴를 표시할 수 있습니다.이는 Ionic 2 설명서를 기반으로 합니다.메뉴.

"swipEnabled" 옵션을 기반으로 제가 한 일은 부울 변수를 사용하여 조건부로 설정되었습니다.

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

저한테는 아주 효과가 있었어요.

그냥 조언일 뿐입니다.변수가 글로벌 변수가 아닌 경우 다른 페이지로 이동한 후에도 앱이 스와이프 없이 유지된다는 것을 눈치채는 사람이 있을 수 있습니다.그러나 변수를 글로벌로 설정하는 것 이상으로 사용자가 앱을 닫았다가 다시 연 후에는 스와이프가 정상적으로 작동합니다.

언급URL : https://stackoverflow.com/questions/38652827/disable-swipe-to-view-sidemenu-ionic-2