离子2 - 如何在登录页面上删除拆分面板

Question

我在应用程序中使用此代码.html，拆分窗格运行良好。但问题是，该窗格适用于每个页面，例如登录或注册，因此请帮助我防止拆分窗格适用于每个页面。

<ion-split-pane when="(min-width: 768px)">
<ion-menu [content]="content">
  <ion-content id="Chat">
  </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>
</ion-split-pane>

Answer 1

    import { Component } from '@angular/core';
    import { MenuController,IonicPage, NavController } from 'ionic-angular';
    @IonicPage()
    @Component({
      selector: 'page-signup',
      templateUrl: 'signup.html',
    })
    export class SignUp {
    constructor(public navCtrl: NavController, public menu : MenuController) 
    {   
       this.menu.enable(false);
       this.menu.swipeEnable(false);
    }
    ionViewWillLeave(){
    this.menu.enable(true);
    this.menu.swipeEnable(true);
    }
  }

希望这有帮助。 只需禁用菜单并使用拆分窗格自动隐藏的菜单滑动即可。

Answer 2

根据这里提到的hoeksms，您可以使用这样的共享服务：

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
@Injectable()
export class SplitPaneData {
    splitPaneState: boolean;
    constructor(public platform: Platform) {
        this.splitPaneState = false;
    }
    setSplitPane(state: boolean) {
        if (this.platform.width() > 768) {
            this.splitPaneState = state;
        } else {
            this.splitPaneState = false;
        }
    }
    getSplitPane() {
        return this.splitPaneState;
    }
}

在 app.component 中，使用该服务来显示/隐藏它：

<ion-split-pane [when]="splitPaneData.getSplitPane()">

如果要在给定页面中隐藏它，可以使用ionViewWillEnter和ionViewWillLeave生命周期事件：

ionViewWillEnter() {
    // Disable the split plane in this page
    this.splitPaneData.setSplitPane(false);
}
ionViewWillLeave() {
    // Enable it again when leaving the page
    this.splitPaneData.setSplitPane(true);
}

Answer 3

更新离子

5

为我工作 登录.页面.ts

  constructor(
    private api: LoginService,
    private loadCt: LoadingController,
    private nav : NavController,
    public menu : MenuController
    ) {
      this.menu.enable(false);
      this.menu.swipeGesture(false)
     }
     ionViewWillLeave(){
      this.menu.enable(true);
      this.menu.swipeGesture(true);
      }