无限卷轴不会在自定义组件内激发-ionic 2

我正在研究离子应用程序。我试图在自定义组件中使用一个无限滚动项,该组件包含一个序列和两个列表,根据用户的选择显示。

这是组件的代码:

 <ion-content *ngIf="show">

  <div no-margin no-padding style="color: rgba(25,94,97,0.98)" >
    <ion-segment style="color: rgba(25,94,97,0.98)" [(ngModel)]="chx">
      <ion-segment-button style="color: rgba(25,94,97,0.98)" value="most">
        MOST TRUSTED
      </ion-segment-button>
      <ion-segment-button style="color: rgba(25,94,97,0.98)" value="recent">
        LATEST
      </ion-segment-button>
    </ion-segment>
  </div>

  <div no-margin no-padding [ngSwitch]="chx">
    <ion-list  no-margin no-padding *ngSwitchCase="'most'">

      <post-card-most no-margin *ngFor="let post of mostTrusted" [post]="post"> </post-card-most>
      <ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollmost" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>

      <ion-infinite-scroll  (ionInfinite)="doInfinite2($event)" threshold="100px">
        <ion-infinite-scroll-content
          loadingSpinner="{{'BUBBLES' | translate}}"
          loadingText="{{'LOADING' | translate}}">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

    </ion-list>


    <ion-list no-margin no-padding  *ngSwitchCase="'recent'">

      <page-post-card no-margin  *ngFor="let post of latestTrusted" [post]="post" [isNotif]=false [home]=false>
      </page-post-card>

      <ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollrecent" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>

      <ion-infinite-scroll  (ionInfinite)="doInfinite($event)" threshold="100px">
        <ion-infinite-scroll-content
          loadingSpinner="{{'BUBBLES' | translate}}"
          loadingText="{{'LOADING' | translate}}">
        </ion-infinite-scroll-content>

      </ion-infinite-scroll>
    </ion-list>

  </div>
</ion-content>

该组件用于离子页面,如下所示:

    <ion-content no-padding>

  <topicsearch [show]="showresult"></topicsearch>   <!-- This is the custom component -->

  <div *ngIf="!showresult" >
  <ion-list  *ngFor="let top of topics">
    <ion-item (click)="topicsearchselected(top.label)" > {{top?.label}}</ion-item>
  </ion-list>
  </div>

</ion-content>

问题是,在自定义组件中向下滚动时,无限滚动不会触发。 有人能解决这个问题吗?