title: Is there a way to load ionic pages inside of an ionic segment?
body: <p>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?</p>
  
  <p>I Have tried setting the pages as tabRoots and invoking them in the segment page</p>
  
  <p>The three pages look like:</p>
  
  <pre><code>&lt;ion-content padding&gt;
  page design and api calls etc..
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>The main page for displaying the tabs looks like:
  manage-request.html</p>
  
  <pre><code>&lt;app-header heading="Manage Requests"&gt;&lt;/app-header&gt;
  &lt;ion-content padding&gt;
  &lt;ion-segment [(ngModel)]="relationship" color="primary"&gt;
    &lt;ion-segment-button text-center value="travelrequest"[root]="tab1Root"&gt;
  Travel Request
    &lt;/ion-segment-button&gt;
    &lt;ion-segment-button value="approverequest" [root]="tab2Root"&gt;
      Approve Request
    &lt;/ion-segment-button&gt;
    &lt;ion-segment-button value="approveexception" [root]="tab3Root"&gt;
      Approve Exception
    &lt;/ion-segment-button&gt;
  &lt;/ion-segment&gt;
  &lt;/ion-content&gt;
  &lt;app-footer isCheckStatus="true"&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>manage-request.ts</p>
  
  <pre><code>    export class ManageRequestPage{
      @ViewChild("manageTabs") manageTabs: Tabs;
      tab1Root = TravelRequestPage;t
      tab2Root = ApproveRequestPage;
      tab3Root = ApproveExceptionRequestPage;
  }
  </code></pre>
  
  <p>Expected result:
  contents of the pages are displayed when i switch the tabs of the ionic segments</p>