ion-split-pane 没有按预期工作

Question

我正在尝试将拆分窗格添加到我的第一个视图中，就像 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 的更改没有添加到文档中，或者我是否需要添加其他内容才能正常工作。

Answer 1

我使用的是 ionic 模板 super，出于某种原因它有两个菜单，一个在 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 窗格工作正常。

ion-split-pane 没有按预期工作

ion-split-pane isn't working as expected

ionic-framework

ionic4