Question

我在ionic 4中构建一个段组件，每个段都有自己的组件，并且每个组件上都有自己的扩展控制器和服务。

每次我在ngOnInit()中进行调用时都会切换这些段，因此这将导致对api进行调用以获取该段的数据。

最好的方法是使用单例数据并将其存储在组件的服务中并重新使用。还是每次更改细分后都可以打个电话？

数据是餐厅信息，餐厅菜单和餐厅评论。

这些会在将来发生变化，但每次按下细分按钮时通话的次数并不一定那么大。

什么是最好的？

这是段html：

    <ion-segment [(ngModel)]="restaurantopts" mode="ios" color="primary">
       <ion-segment-button mode="ios" value="info" class="xs-padding-t">
          {{ 'PAGES.RESTAURANT_DETAIL.SEGMENT_BTNS.INFO' | translate }}
       </ion-segment-button>
       <span class="segment-divider"></span>
       <ion-segment-button mode="ios" value="menu" class="xs-padding-t">
          {{ 'PAGES.RESTAURANT_DETAIL.SEGMENT_BTNS.MENU' | translate }}
       </ion-segment-button>
       <span class="segment-divider"></span>
       <ion-segment-button mode="ios" value="reviews" class="xs-padding-t">
          {{ 'PAGES.RESTAURANT_DETAIL.SEGMENT_BTNS.REVIEWS' | translate }}
       </ion-segment-button>
    </ion-segment>

    <div *ngSwitchCase="'info'" class="margin-h s-margin-v">
      <div class="restaurant-info-block">
           <div class="margin-b">
               <mm-body-h>{{ 'PAGES.RESTAURANT_DETAIL.OPENING_HOURS' | translate }}</mm-body-h>
           </div>
           <mm-restaurant-info-block [restaurant]="restaurant"></mm-restaurant-info-block>
      </div>
    </div>

    <div *ngSwitchCase="'menu'" [ngClass]="(addedToCart) ? 'x5-margin-b' : null">                
        <mm-restaurant-menu  
              [restaurantId]="restaurant._id"
              [restaurantName]="restaurant.Name"
              [checkedIn]="checkedIn"
              (showFooterCart)="displayFooterCart()"></mm-restaurant-menu>
   </div>

   <div *ngSwitchCase="'reviews'" class="tab-reviews margin">
       <mm-restaurant-reviews [restaurantId]="restaurant._id"></mm-restaurant-reviews>
  </div>

因此mm-restaurant-info-block和mm-restaurant-reviews拥有自己的控制器和服务，它们在init函数上调用fetchData()方法。

Answer 1

除了您的细分受众群组件之外，您还可以拥有一个ion-refresher组件。这样，您可以更改段的行为，以便每个段只获取一次数据，但让用户使用离子刷新器手动获取新数据。

<ion-refresher (ionRefresh)="doRefresh($event)">
   <ion-refresher-content pullingText="Pull to refresh..." refreshingText="Refreshing..."></ion-refresher-content>
</ion-refresher>

doRefresh(refreshEvent) {
   // Use the active segment to fetch correct data
   this.loadData(this.restaurantopts, refreshEvent);
}

在数据段中使用单例数据

1 个答案: