Question

我尝试将拆分窗格添加到我的第一个视图中，就像documentation中所述，但它不能使用离子服务或离子部署浏览器。

我使用以下内容：

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>

如果从离子3到4有一些变化没有添加到文档中，或者如果我需要添加其他东西来实现这一点，我现在不知道。

Answer 1

我使用离子模板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并没有按预期工作

1 个答案: