13

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

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

我<ion-split-pane>从 app.component.html中删除了

我修改了 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);
  }
}

我尝试使用 ion-menu 中设置的 id

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

并更改我的代码 

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

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

谢谢

4

8 回答 8

36

Ionic 4.0.0仍然支持ionViewWillEnter，使用下面的代码：

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

你可以在这里找到完整的例子。

于 2018-08-01T16:09:08.217 回答
10

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

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

constructor( public menuCtrl: MenuController){}

ionViewWillEnter() {
 this.menuCtrl.enable(false);
}
于 2019-01-04T14:33:50.690 回答
7

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

<ion-menu [disabled]="!isLoggedIn"></ion-menu>
于 2018-10-22T11:46:08.463 回答
4

使用解决了我的问题

<ion-menu [swipeGesture]="false" ...>
于 2019-06-10T14:53:15.973 回答
2

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

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

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

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

  ionViewDidLeave() {
    // enable the root left menu when leaving the tutorial page
    this.menuCtrl.enable(true);
  }
于 2021-02-22T13:30:24.463 回答
0

我认为您应该像这样禁用 ion-menu 中的滑动，而不是手动禁用它：

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

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

于 2018-08-02T06:18:28.000 回答
0

这是正确的方法

constructor(public menu: MenuController) {
    this.menu.swipeGesture(false)
}
于 2020-06-11T14:55:17.267 回答
0

以上答案都不适合我。

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

1.initializeApp

2.ngOnInit

2.1 平台准备就绪

图片 app.component.ts

例如，控制台输出，从platfor准备好在initializeApp 图像输出 initializeApp

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>
于 2020-08-26T19:26:09.097 回答