Ионный 2, ионное содержание субкомпонента перекрывается ионным заголовком

У меня есть страница с <ion-segment>, которую я использую как вкладку для переключения между отображением двух разных пользовательских компонентов:

<ion-header>

  <ion-navbar>
    <ion-title>Page</ion-title>
  </ion-navbar>


  <ion-toolbar>
    <ion-segment [(ngModel)]="tab">
      <ion-segment-button value="section1">
        Section 1
      </ion-segment-button>
      <ion-segment-button value="section2">
        Section 2
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

</ion-header>

<section1 *ngIf="tab === 'section1'"></section1>
<section2 *ngIf="tab === 'section2'"></section2>

Компоненты раздела просто имеют <ion-content> с вещами в нем.

Проблема в том, что если я сделаю это таким образом, содержимое страниц будет перекрываться заголовком. Я пробовал разные способы избежать этого без успеха.

Один из способов — поместить <ion-content> на страницу следующим образом:

<ion-content>
  <section1 *ngIf="tab === 'section1'"></section1>
  <section2 *ngIf="tab === 'section2'"></section2>
</ion-content>

Но это порождает новую проблему. Если страница содержит <ion-refresher>, она выдаст эту ошибку: Template parse errors: No provider for Content. Перемещение обновления на страницу также не является вариантом.

Как решить эту проблему перекрытия, сохраняя при этом <ion-content> в пользовательских компонентах?


ionic-framework ionic3 ionic2
person barney765    schedule 11.05.2017    source источник
comment
Что я могу предложить: вы должны использовать один ионный контент для полной страницы. Удалите ионное содержание из разделов. ion-content добавляет много вещей в DOM, и использование более одного может вызвать несколько проблем, таких как прокрутка, проблемы с бесконечной прокруткой.   -  person Sandeep Sharma    schedule 11.05.2017
comment
@SandeepSharma, я согласен, что на странице должен быть только один ионный контент. Это либо на Странице, либо в Разделах. Так что в любой момент активен только один. Проблема в том, что если я помещу это в Раздел, я получу проблему с перекрытием. Если я поставлю его в Раздел, я не смогу использовать ион-рефрешер.   -  person barney765    schedule 11.05.2017
comment
Проблема аналогична этой . Основная причина наложения, потому что встроенный css не работает правильно, если они обернуты другим тегом html в вашем случае ‹section1› или ‹section2›.   -  person DjezzzL    schedule 12.05.2017