Есть ли способ загрузить ионные страницы внутри ионного сегмента?

Question

Новичок с ионным v3.У меня есть три ионные страницы, которые я пытаюсь отобразить внутри ионных сегментов.Я хочу сохранить функциональность страниц отдельно для удобства сопровождения.На данный момент я не нашел обходного пути, так как ionic не допустит более одного содержания ионов на странице.Любой другой подход / предложения / обходные пути?

Я попытался установить страницы как tabRoots и вызвать их на странице сегмента

Три страницы выглядят так:

<ion-content padding>
page design and api calls etc..
</ion-content>

Главная страница для отображения вкладок выглядит следующим образом: manage-request.html

<app-header heading="Manage Requests"></app-header>
<ion-content padding>
<ion-segment [(ngModel)]="relationship" color="primary">
  <ion-segment-button text-center value="travelrequest"[root]="tab1Root">
Travel Request
  </ion-segment-button>
  <ion-segment-button value="approverequest" [root]="tab2Root">
    Approve Request
  </ion-segment-button>
  <ion-segment-button value="approveexception" [root]="tab3Root">
    Approve Exception
  </ion-segment-button>
</ion-segment>
</ion-content>
<app-footer isCheckStatus="true"></app-footer>

manage-request.ts

    export class ManageRequestPage{
    @ViewChild("manageTabs") manageTabs: Tabs;
    tab1Root = TravelRequestPage;t
    tab2Root = ApproveRequestPage;
    tab3Root = ApproveExceptionRequestPage;
}

Ожидаемый результат: содержимое страниц отображается при переключениивкладки ионных сегментов

Answer 1

Рассматривали ли вы возможность размещения вашей функции "страницы" в угловом компоненте (а не в полном объеме ионной "страницы")?По моему опыту, ионная «страница» обрабатывается по-разному и, скорее всего, не предназначена для одновременного отображения многих, особенно если вы используете IonicPage .Простая команда CLI ниже создаст компонент.Затем поместите туда свой пользовательский интерфейс / логику и вставьте этот элемент в свой ion-segment.

ionic generate component

Вот краткий пример, который я описал в Stackblitz .Обратите внимание, что на главной странице есть 3 сегмента, а в среднем (закладка) есть компонент.

Answer 2

Я предлагаю вам использовать ngSwitch следующим образом [ngSwitch]="mySegment", поэтому вам не нужно использовать tabRoot и более одного ion-content для переключения вкладок.

<ion-header>
  <ion-navbar color="primary">
    <ion-title> Manage Requests </ion-title>
  </ion-navbar>
</ion-header>

<ion-content fullscreen>

<ion-list-header text-center>

<ion-segment [(ngModel)]="mySegment" (ionChange)="segmentChanged(mySegment)">
  <ion-segment-button value="travelrequest">
      <ion-icon name="list"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="approverequest">
      <ion-icon name="ios-checkmark"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="approveexception">
      <ion-icon name="close"></ion-icon>
  </ion-segment-button>
</ion-segment>

</ion-list-header>

<div [ngSwitch]="mySegment">

<ion-list *ngSwitchCase="'travelrequest'">
    <ion-item>
        <p> Here is the travelrequest content… </p>
    </ion-item>
</ion-list>

<ion-list *ngSwitchCase="'approverequest'">
    <ion-item>
        <p> Here is the approverequest content… </p>
    </ion-item>
</ion-list>

<ion-list *ngSwitchCase="'approveexception'">
    <ion-item>
        <p> Here is the approveexception content… </p>
    </ion-item>
</ion-list>

</div>

</ion-content>

Надеюсь, это поможетвы.