Is there a way to load ionic pages inside of an ionic segment?

Question

A newbie with ionic v3. I have three ionic pages which i am trying to display inside of ionic segments. I want to keep the functionality of the pages segregated for easier maintainability. For now i haven't found a workaround since ionic won't allow more than one ion-content in a page. Any other approach/suggestions/workarounds?

I Have tried setting the pages as tabRoots and invoking them in the segment page

The three pages look like:

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

The main page for displaying the tabs looks like: 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;
}

Expected result: contents of the pages are displayed when i switch the tabs of the ionic segments

Answer 1

Have you considered putting your "page" functionality into an angular component (not a full-blown Ionic "page")? In my experience an Ionic "page" is treated differently and likely isn't meant for having many displayed at once, especially if you are using IonicPage. The simple CLI command below will generate a component. Then put your UI/Logic in there, and put that element in your ion-segment.

ionic generate component

Here is a quick example I whipped up on Stackblitz. Notice there are 3 segments on the home page, and the middle one (bookmark) has a component in it.

Answer 2

I suggest you to use ngSwitch like this [ngSwitch]="mySegment", so you don't need to use tabRoot and more than one ion-content for switch the tabs.

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

Hope it helps you.