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

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

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

Solution

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.