web-dev-qa-db-ja.com

ログインページのメニューを無効にするionic 4

ionic 4のベータ版を初めて使用します。ログインページでメニューを無効にしようとしましたが、問題があります。

Ionic-cliとサイドメニューテンプレートを使用してアプリを作成し、ログインページを生成しました。

App.component.htmlから<ion-split-pane>を削除しました

ログイン画面にリダイレクトするようにapp-routing.module.tsを変更しました。ログインファイルに、ngOnInitイベントを挿入して、この特定のページのメニューを無効にしようとしました

import { Component, OnInit, AfterContentInit, AfterViewInit,OnDestroy } from '@angular/core';
import { MenuController } from '@ionic/angular';
@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit, AfterContentInit, AfterViewInit,OnDestroy {
  constructor(public menuCtrl: MenuController) {}
  ngOnInit() {
    this.menuCtrl.enable(false);
    this.menuCtrl.swipeEnable(false);
  }
  ngAfterContentInit()  {
    this.menuCtrl.enable(false);
    this.menuCtrl.swipeEnable(false);
  }
  ngAfterViewInit() {
    this.menuCtrl.enable(false);
    this.menuCtrl.swipeEnable(false);
  }
  ngOnDestroy() {
    this.menuCtrl.enable(true);
    this.menuCtrl.swipeEnable(true);
  }
}

私はイオンメニューで設定されたIDで試しました

<ion-menu swipeEnabled="true" #menu>

でコードを変更します

this.menuCtrl.enable(false, 'menu');

うまくいきません。誰か助けてください。

ありがとう

ionic-frameworkangular6ionic4
6
JEKES

Ionic 4.0.0は引き続きionViewWillEnterをサポートします。以下のコードを使用してください：

ionViewWillEnter() {
  this.menuCtrl.enable(false);
}

完全な例 here を見つけることができます。

20
coturiv

ionic 4アプリでは、welcome.page.tsファイルで次のことを行いました。welcome.page.tsは、分割ペインを非表示にするページです。

import {  MenuController } from '@ionic/angular';

constructor( public menuCtrl: MenuController){}

ionViewWillEnter() {
 this.menuCtrl.enable(false);
}
5
Phan Hero

Ionic 4では、イオンメニューのdisabledプロパティを使用して、ログイン時に非表示にします。

<ion-menu [disabled]="!isLoggedIn"></ion-menu>
3
chris cooley

を使用して私の問題を解決しました

<ion-menu [swipeGesture]="false" ...>
1
maxpaj

手動で無効にする代わりに、次のようにイオンメニューでスワイプを無効にする必要があると思います。

<ion-menu [content]="content" [swipeEnabled]="false">
   Your code
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

そしてログインページで

<ion-header>

 <ion-navbar>
   <ion-title text-center>Login</ion-title>
 </ion-navbar>

</ion-header>

この方法のメニューは、ログインページで無効になります。

0
fiza khan