angular - Ionic 2 - Sadece giriş sayfasında bölünmüş panel nasıl kaldırılır?


Bu kodu app.html'de kullanıyorum, split-pane harika çalışıyor. Ama sorun şu ki, bölmeler login veya SignUp gibi her sayfa için çalışıyor, bu yüzden lütfen split-pane’in her sayfada çalışmasını nasıl engelleyebileceğim konusunda bana yardımcı olun.

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

Cevap #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);
    }
  }

Umarım bu yardımcı olur. Sadece menüyü devre dışı bırakın ve bölünmüş panel otomatik olarak gizlerken menüyü kaydırın.

Cevap #2

hoeksms'in burada belirttiğine dayanarak, bu tür bir paylaşılan hizmet kullanabilirsiniz:

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

}

Ve app.component içinde o servisi göster/gizle yapmak için kullanın:

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

Bunu belirli bir sayfada gizlemek istiyorsanız, ionViewWillEnter ve ionViewWillLeave yaşam döngüsü olaylarını kullanabilirsiniz:

ionViewWillEnter() {
    // Disable the split plane in this page
    this.splitPaneData.setSplitPane(false);
}

ionViewWillLeave() {
    // Enable it again when leaving the page
    this.splitPaneData.setSplitPane(true);
}

İlgili makaleler