ионно-сплит панель не работает, как ожидалось - PullRequest
0 голосов
/ 25 апреля 2018

Я пытаюсь добавить разделенную панель к своему первому виду, как, скажем, в документации , но она не работает с браузером ionic serve или ionic deploy.

IЯ использую следующее:

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это не было добавлено в документацию или если мне нужно добавить что-то еще, чтобы это работало.

1 Ответ

0 голосов
/ 25 апреля 2018

Я использовал ионный шаблон 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>`
})

А теперь панель с ионно-разделенной панелью работает без проблем.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...