离子拆分窗格未按预期工作答案

【问题标题】：ion-split-pane isn't working as expected离子拆分窗格未按预期工作
【发布时间】：2018-10-06 07:43:59
【问题描述】：

我正在尝试将拆分窗格添加到我的第一个视图中，就像在 documentation 中所说的那样，但它不适用于 ionic serve 或 ionic deploy 浏览器。

我正在使用以下内容：

cli 包：(/usr/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

全局包：

cordova (Cordova CLI) : 8.0.0

本地包：

@ionic/app-scripts : 3.1.9
Cordova Platforms  : android 7.0.0 browser 5.0.3
Ionic Framework    : ionic-angular 3.9.2

系统：

Node : v8.11.0
npm  : 5.6.0 
OS   : Linux 4.15

视图的代码是这样的：

<ion-split-pane when="xs">
  <!-- Side Menu -->
  <ion-menu [content]="content">
    <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
    <ion-content>
      <ion-list>
        <ion-item menuClose ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
          {{p.title}}
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <!-- Content -->
  <ion-nav [root]="rootPage" main #content></ion-nav>
</ion-split-pane>

如果从 ionic 3 到 4 的某些更改未添加到文档中，或者我需要添加其他内容才能使其正常工作，我现在不知道。

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

我使用的是 ionic 超级模板，由于某种原因，它有两个菜单，一个在 app.module.ts 模板中，一个作为页面。

app.ts 上的那个是这样的：

@Component({
  // Menu lateral
  template: `<ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Olá</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <button menuClose ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
          {{p.title}}
        </button>
      </ion-list>
    </ion-content>

  </ion-menu>
  <ion-nav #content [root]="rootPage"></ion-nav>`
})

所以我把它改成了：

@Component({
  template: `<ion-nav #content [root]="rootPage"></ion-nav>`
})

现在 ion-split-pane 窗格可以正常工作了。

【讨论】：