Ionic - 로그인 페이지에서만 sidemenu를 제거하는 방법

Ionic - 로그인 페이지에서만 sidemenu를 제거하는 방법

로그인 페이지에서만 sidemenu를 삭제해야 합니다.그렇지 않으면 남습니다.어떻게 할 수 있을까요?명령어 ionic을 사용하고 있습니다.ionic start myApp sidemenu프로젝트를 만듭니다.

app.module

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('login', {
      url: "/login",
      templateUrl: "templates/login.html",
      controller: 'LoginCtrl'
    })

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })

    .state('app.search', {
      url: "/search",
      views: {
        'menuContent' :{
          templateUrl: "templates/search.html"
        }
      }
    })

로그인 페이지

<ion-view title="Login">
  <ion-content>
      <div class="list">
        <label class="item">
          <button class="button button-block button-positive" type="submit" ng-click="login()">Log in</button>
        </label>
      </div>

  </ion-content>
</div>

sidemenu는 언제든지 호출을 통해 비활성화/활성화할 수 있습니다.

$ionicSideMenuDelegate.canDragContent(false)

예:

angular.module('ABC').controller('xyzCtrl', function($scope, $ionicSideMenuDelegate) {

    $ionicSideMenuDelegate.canDragContent(false)

});

**Ionic 2**


    import { MenuController } from 'ionic-angular';

    export class LoginPage {

       constructor(public menuCtrl: MenuController) {

       }

       ionViewWillEnter() {

           this.menuCtrl.swipeEnable( false )
       }

       ionViewDidLeave() {

           this.menuCtrl.swipeEnable( true )
       }
    }



IONIC 4: Sept2019
try this code to in your login.page.ts
Step1: import {  MenuController } from '@ionic/angular';
Step2: constructor(public menuCtrl: MenuController) { }
(below constructo)
Step3: ionViewWillEnter() {
          this.menuCtrl.enable(false);
       }
       ionViewDidLeave() {
          this.menuCtrl.enable(true);
       } 

this code will help you to work with side menu flawlessly on any screen, if you login & re-login and try it will work now. 

여기서도 마찬가지입니다. 이온 뷰에 hide-nav-bar="true"를 추가합니다.

<ion-view hide-nav-bar="true">

도움이 됐으면 좋겠다!

sidemenu 없이 로그인 페이지를 정의할 수 있습니다.로그인 페이지의 HTML 템플릿을 확인합니다.이 기능을 가지고 있지 않은지 확인합니다.<ion-side-menus>그리고.<ion-side-menu>요소들이 들어있어요.이것들은 사이드메뉴가 필요한 페이지에 사용됩니다.

로그인 페이지는 다음과 같습니다.

<ion-view>
  <ion-content>
     <!--your page content goes in here-->
   </ion-content>
</ion-view>

다른 페이지에서 sidemenu를 사용하려면 sidemenu 콘텐츠를 상위 상태로 두면 됩니다.이 상태는 코드 내의 sidemenu입니다.app주.

menu.html 파일:

<ion-view>
  <ion-side-menus>
    <ion-side-menu>
      <!--put your side menu content here-->
      <!--any child state of app will inherit this sidemenu-->
    </ion-side-menu>

   <ion-side-menu-content>
      <ion-nav-view name="menuContent"></ion-nav-view>
   </ion-side-menu-content>
  </ion-side-menus>
</ion-view>

게임 시작은 조금 늦었지만, 이 옵션은 (저와 같이) 로그인 뷰를 웹 사이트 내에서 유지해야 하는 분들을 위한 또 다른 옵션입니다.side-menu레이아웃이지만 뷰 제목을 유지하면서 사이드 메뉴 버튼을 숨겨야 합니다.

내부login.html표시:ion-header-bar제목과 함께 새 헤더를 만든 다음 숨김 지시문ion-nav-bar에서side-menu를 통한 레이아웃ion-view태그를 붙입니다.

예(login.html)

<ion-header-bar class="bar-positive" align-title="center">
    <h1 class="title">Login</h1>
</ion-header-bar>

<ion-view hide-nav-bar="true">
 <!-- Login content goes here -->
</ion-view>

드래그 제스처를 무효로 할 필요가 있는 경우는, @waqas 의 제안과 같이 컨트롤러로 무효로 합니다.

질문에 대한 작은 데모를 만들었습니다.

플런커 데모

sidemenu와 다른 페이지를 원하는 경우.신규 작성Parent state.예를들면

$stateProvider
    .state('landing', {
        url: '/landing',
        controller: 'landingCtrl',
        templateUrl: 'landing.html'
    });

Html:

<ion-view class="view-bg-blue" >
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    </ion-nav-buttons>
    <ion-content padding="true">
        <h3 class="text-center">Welcome To Landing Page</h3>
        <div class="row">
            <div class="col">
                <div class="text-center">
                    <h4>My App</h4>
                    <div class="row">
                        <div class="col">
                            <input placeholder="User">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <input placeholder="password">
                        </div>
                    </div>
                    <a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Login</a>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

다음으로 이 상태를 호출합니다./landing당신이 원할 때 언제든.

늦은 건 알지만 여기 빠르고 쉬운 해결책이 있습니다.

로그인 컨트롤러에 추가

$scope.$on('$ionicView.afterEnter', function(event) {
    $ionicSideMenuDelegate.canDragContent(false);
});
//enable side menu drag before moving to next view
$scope.$on('$ionicView.beforeLeave', function(event) {
    $ionicSideMenuDelegate.canDragContent(true);
});

<ion-side-menus>

bcn

            <ion-tab title="ALL" href="#/dashbord/all" class="bgorange">
                <ion-nav-view name="all"></ion-nav-view>
            </ion-tab>


            <ion-tab title="INFO" class="bgorange" href="#/dashbord/info">
                <ion-nav-view name="info"></ion-nav-view>
            </ion-tab>

            <ion-tab title="EVENTS" class="bgorange" href="#/dashbord/events">
                <ion-nav-view name="events"></ion-nav-view>
            </ion-tab>


        </ion-tabs>
        <ion-nav-view></ion-nav-view>

    </ion-pane>
    <div ng-include src="calender.html"></div>
    <ion-side-menu side="left">

        <ion-content has-header="true">
            <ion-list>

                <ion-item menu-close class="item-icon-left bottombordernone" href="#/dashbord">
                    <i class="icon ion-home"></i>
                    What's New
                </ion-item>
                <ion-item menu-close class="item-icon-left bottombordernone">
                    <i class="icon ion-chatbox-working"></i>
                    Feedback
                </ion-item>
                <ion-item menu-close class="item-icon-left bottombordernone" ng-click="logout()">
                    <i class="icon ion-power"></i>
                    Logout
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>

@줄루, 여기 내 풀코드가 있다.이 전 남편이 잘 됐으면 좋겠군

// index.html
<body>
  <section ui-view></section>
</body>

// routes.js
$stateProvider
  .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html'
  })

$urlRouterProvider.otherwise('/login')

작업입니다. 자세한 내용은 여기를 참조하십시오: 각의/의각

슬라이드 메뉴를 봐야 합니다.열려 있는 경우는, 토글 해 닫아야 합니다.

 .controller('kayTOlCtrl', function($scope,$ionicSideMenuDelegate) {
     //
     $scope.$watch(function () {
            return $ionicSideMenuDelegate.getOpenRatio();
        },

                    function (ratio) {
                        if (ratio != 0) {
                          $ionicSideMenuDelegate.toggleRight();

                        }

                    });
    })

$ionicSideMenuDelegate.canDragContent(false)를 호출해도 메뉴에 액세스하기 위한 스와이프 기능은 비활성화되지만 탐색바에 햄버거 전환 버튼(있는 경우)은 숨겨지지 않습니다.그러기 위해서는 다음과 같이 ion-side-menu-content 요소에 $root 바인딩과 함께 ng-show를 사용할 수 있습니다.

  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"
      ng-show="$root.showMenuIcon">
    </button>
  </ion-nav-buttons>

로그인 컨트롤러에서 다음을 수행합니다.

$scope.$on('$ionicView.beforeEnter', function (event) {
  $scope.$root.showMenuIcon = false;
  $ionicSideMenuDelegate.canDragContent(false);
});

$scope.$on('$ionicView.beforeLeave', function (event) {
  $scope.$root.showMenuIcon = true;
  $ionicSideMenuDelegate.canDragContent(true);
});

메인 앱 컨트롤러에 추가할 수도 있습니다.

$scope.$root.enableLeft = true;
$scope.$root.showMenuIcon = true;

사이드 메뉴를 표시하지 않는 모든 컨트롤러에서 false로 전환하기만 하면 됩니다.

$scope.$root.enableLeft = false;
$scope.$root.showMenuIcon = false;

is-enabled="$root.enableLeft"를 html 태그와 ng-show="$root"에 추가합니다.showMenuIcon"을 html 태그 내의 버튼에 추가합니다.

여기에 있는 모든 사람의 다양한 답변과 15분간의 시도를 바탕으로 작업 예를 제시하겠습니다.복사 붙여넣기를 간단하게 할 수 있습니다.

login.html과 같은 보기

<ion-view hide-nav-bar="true">
    <ion-header-bar class="bar-light title-image" align-title="center">
        <h1 class="title">Title</h1>
    </ion-header-bar>
    <ion-content>
    </ion-content>
</ion-view>

LoginCtrl과 같은 관련 컨트롤러

function LoginCtrl($scope, $ionicSideMenuDelegate) {

    $scope.$on('$ionicView.afterEnter', function(event) {
        $ionicSideMenuDelegate.canDragContent(false);
    });
    //enable side menu drag before moving to next view
    $scope.$on('$ionicView.beforeLeave', function(event) {
        $ionicSideMenuDelegate.canDragContent(true);
    });
}

.state('login', {
        url: '/login',
        controller: 'LoginCtrl',
        templateUrl: 'templates/loginpage.html'
    })
.state('app.account', {
        url: '/account',
        views: {
            'menuContent': {
                templateUrl: 'templates/account.html',
                controller: 'AccountCtrl'
            }
        }
    })

import {IonicApp, Page, NavController, MenuController} from 'ionic/ionic';
import {TabsPage} from '../tabs/tabs';
import {SignupPage} from '../signup/signup';
import {UserData} from '../../providers/user-data';


@Page({
  templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
  constructor(nav: NavController, userData: UserData, menu: MenuController) {
    this.nav = nav;
    this.userData = userData;

    this.login = {};
    this.submitted = false;

    this.menu = menu;

  }

  onLogin(form) {
    this.submitted = true;

    if (form.valid) {
      this.userData.login();
      this.nav.push(TabsPage);
    }
  }

  onSignup() {
    this.nav.push(SignupPage);
  }

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

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

}

  <ion-pane ion-side-menu-content drag-content="false">
       <ion-header-bar class="bar-dark">
           <h1 class="title">Cards</h1>
       </ion-header-bar>
       <ion-content scroll="true">
       </ion-content>
   </ion-pane> 

이건 나한테 잘 맞는...

modal 뷰에서 로그인 페이지를 여는 가장 간단한 해결책은 checkout $ionic Modal이라고 생각합니다.

언급URL : https://stackoverflow.com/questions/25165972/ionic-how-to-remove-sidemenu-on-login-page-only