Question

我第一次使用离子4的beta。我尝试禁用登录页面上的菜单，但遇到了一些麻烦。

我已经使用ionic-cli和sidemenu模板创建了该应用程序，然后生成了一个登录页面。

我从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');

它不起作用，请有人帮我。

谢谢

Answer 1

Ionic 4.0.0 仍支持ionViewWillEnter，请使用以下代码：

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

您可以找到完整的示例here。

Answer 2

Ionic 4，您将使用ion-menu上的disabled属性在登录时隐藏。

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

Answer 3

对于ionic 4应用程序，我在welcome.page.ts文件中执行了以下操作。 welcome.page.ts是我要在其中隐藏拆分窗格的页面。

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

constructor( public menuCtrl: MenuController){}

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

Answer 4

我认为您应该禁用离子菜单中的滑动，而不是手动禁用它：

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

这种方式的菜单将在登录页面中被禁用。

Answer 5

使用解决了我的问题

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

Answer 6

这是正确的方法

constructor(public menu: MenuController) {
    this.menu.swipeGesture(false)
}

Answer 7

以上答案均不适合我。

我做了一个测试，以检查方法的执行顺序，这就是我得到的：

1.initializeApp

2.ngOnInit

2.1平台就绪

image app.component.ts

示例控制台输出，来自 initializeApp image output initializeApp

中的 platfor ready

ionViewDidEnter内部的console.log（'ionViewDidEnter'）从未被控制台显示

在上述情况显而易见的情况下，请尝试以下情形

对不起，我的英语

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Platform, MenuController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
  public selectedIndex = 0;
  public appPages = [
    {
      title: 'Inbox',
      url: '/folder/Inbox',
      icon: 'mail'
    },
    {
      title: 'Outbox',
      url: '/folder/Outbox',
      icon: 'paper-plane'
    },
    {
      title: 'Favorites',
      url: '/folder/Favorites',
      icon: 'heart'
    },
    {
      title: 'Archived',
      url: '/folder/Archived',
      icon: 'archive'
    },
    {
      title: 'Trash',
      url: '/folder/Trash',
      icon: 'trash'
    },
    {
      title: 'Spam',
      url: '/folder/Spam',
      icon: 'warning'
    }
  ];
  public labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private menu: MenuController
  ) {
    this.initializeApp();
  }

  initializeApp() {
    console.log('initializeApp');
    
    return this.platform.ready().then(() => {
      console.log('platform ready')
      this.statusBar.styleDefault()
      this.splashScreen.hide()
      // // -------------------------------------------------// 
      // this.menu.enable(false, "custom")                   //
      // this.menu.isEnabled('custom').then((enable)=>{      // => yes working
      //   console.log('enable from platform ready', enable);//
      // });                                                 //
      // //--------------------------------------------------//
    });
  }

  ngOnInit() {
    console.log('ngOnInit');
    //  // ---------------------------------------------// 
    //  this.menu.enable(false, "custom")               //
    //  this.menu.isEnabled('custom').then((enable)=>{  // => yes working
    //    console.log('enable from ngOnInit', enable);  //
    //  });                                             //
    //  //----------------------------------------------//
    const path = window.location.pathname.split('folder/')[1];
    if (path !== undefined) {
      this.selectedIndex = this.appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
    }
  }
  ionViewDidEnter(){
    console.log('ionViewDidEnter')
    //  // ---------------------------------------------// 
    //  this.menu.enable(false, "custom")               //
    //  this.menu.isEnabled('custom').then((enable)=>{  // => not working
    //    console.log('enable ionViewDidEnter', enable);//
    //  });                                             //
    //  //----------------------------------------------//
  }

}

app.component.html

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay" menuId="custom" id="custom">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>Inbox</ion-list-header>
          <ion-note>hi@ionicframework.com</ion-note>

          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

        <ion-list id="labels-list">
          <ion-list-header>Labels</ion-list-header>

          <ion-item *ngFor="let label of labels" lines="none">
            <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
            <ion-label>{{ label }}</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Answer 8

完整的解决方案将首先使用下面的代码 ionViewWillEnter（意思是当它进入登录页面时您需要禁用侧边菜单）

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

然后当你离开侧边菜单时你需要重新启用它，否则它会在整个应用程序中禁用它

注意：不要忘记在构造函数上调用 public menuCtrl: MenuController

  ionViewDidLeave() {
    // enable the root left menu when leaving the tutorial page
    this.menuCtrl.enable(true);
  }

禁用登录页面ionic 4上的菜单

8 个答案: