Ionic 2 侧边菜单始终可见

Question

当我的应用加载到平板设备中时，我需要始终在标题栏中显示侧边菜单和隐藏菜单图标。我尝试了很多但没有成功。任何人都可以在这里点亮吗？

Answer 1

我认为您正在寻找 showWhen 和 hideWhen 属性。文档here。确实，有一个tabletplatform。但是你会遇到这样的情况：当用户在菜单外点击时，他会关闭它。

正如我解释的here，我会做的就是在菜单内容中使用组件包装器，并在<ion-content> 中的tablet 上使用具有showWhen 属性的相同包装器。

编辑：添加代码来说明我提出的解决方案。

菜单在某些平台上始终可见行为类似示例

测试环境：

Cordova CLI: 6.2.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 3.19
Node Version: v6.9.1
Xcode version: Not installed

应用

./src/app/app.component.html :

<ion-menu
    [content]="root"
>
    <ion-header>
        <ion-toolbar>
            <ion-title>
                Menu
            </ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <sitemap-component
            hideWhen="tablet, phablet"
        >
        </sitemap-component>
    </ion-content>
</ion-menu>
<ion-nav
    #root
    [root]="rootPage"
>
</ion-nav>

./src/app/app.component.ts ：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';


@Component({
  templateUrl: "app.component.html"
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

./src/app/app.module.ts :

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { SitemapComponent } from '../components/sitemap/sitemap.component';
import { ContentComponent } from '../components/content/content.component';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SitemapComponent,
    ContentComponent
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SitemapComponent,
    ContentComponent
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

主要内容（平台无关）

./src/components/content/content.component.html：

<p>
    Here is the main content.
</p>
<button
    ion-button
    menuToggle
>
    Menu
</button>

./src/components/content/content.component.scss ：

content-component {
}

./src/components/content/content.component.ts ：

import {Component} from '@angular/core'

@Component(
    {
        selector    : 'content-component'
      , templateUrl : 'content.component.html'
    }
)
export class ContentComponent
{
    constructor()
    {
    }
}

站点地图（在菜单或主要内容部分，根据平台）

./src/components/sitemap/sitemap.component.html：

<p
    hideWhen="tablet, phablet"
>
    Here is the menu content on a platform that is neither a tablet nor a phablet.
</p>
<p
    showWhen="tablet, phablet"
>
    Here is the menu content on a platform that is a tablet or a phablet.
</p>
<ion-list
>
    <ion-item
        *ngFor="let item of item_array"
    >
        {{item}}
    </ion-item>
</ion-list>

./src/components/sitemap/sitemap.component.scss：

sitemap-component {
}

./src/components/sitemap/sitemap.component.ts ：

import {Component} from '@angular/core'

@Component(
    {
        selector    : 'sitemap-component'
      , templateUrl : 'sitemap.component.html'
    }
)
export class SitemapComponent
{
    item_array =
    [
        "foo"
      , "bar"
    ]

    constructor()
    {
    }
}

首页

./src/pages/home/home.html :

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-navbar>
</ion-header>
<ion-content
    padding
>
    <div
        showWhen="tablet, phablet"
    >
        <ion-row>
            <ion-col
                width-20
            >
                <sitemap-component>
                </sitemap-component>
            </ion-col>
            <ion-col
                width-80
            >
                <content-component>
                </content-component>
            </ion-col>
        </ion-row>
    </div>
    <div
        hideWhen="tablet, phablet"
    >
        <content-component>
        </content-component>
    </div>
</ion-content>

./src/pages/home/home.scss :

page-home {
}

./src/pages/home/home.ts :

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    constructor()
    {
    }
}

希望这会有所帮助！

Answer 2

从 Ionic 2.2.0 版开始，有一个开箱即用的解决方案，称为拆分窗格：

<ion-split-pane>
    <ion-menu [content]="myNav"></ion-menu>
    <ion-nav #myNav main><ion-nav>
</ion-split-pane>

更多信息here