Question

我在app.html中使用此代码，拆分窗格工作得很漂亮。但问题是，该窗格适用于登录或SignUp等每个页面，因此请帮助我防止拆分窗格适用于每个页面。

<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 提到的here，你可以使用这样的共享服务：

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

更新ionic 5

为我工作 login.page.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);
      }

Ionic 2 - 如何仅在登录页面上删除拆分面板？

3 个答案: