angular – Ionic 2 – 如何仅在登录页面上删除分割面板？

发布时间：2020-12-17 17:42:54 所属栏目：安全来源：网络整理

导读：我在app.html中使用此代码,拆分窗格工作得很漂亮.但问题是,窗格适用于登录或SignUp等每个页面,因此请帮助我防止拆分窗格适用于每个页面. ion-split-pane when="(min-width: 768px)"ion-menu [content]="content" ion-content id="Chat" /ion-content/ion-men

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

解决方法

根据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);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!