我有一个 <ion-segment> 的页面，我用它作为Tab来显示两个不同的自定义组件：

<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> .

问题是，如果我这样做，页面的内容将与 Headers 重叠 . 我尝试了不同的方法来避免这种情况，但没有成功 .

一种方法是将 <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 ionic2 ionic3