Ionic3 有没有办法在ionic段中加载ionic页面？

爱奥尼亚v3的新手。我有三个爱奥尼亚的网页，我正试图显示在爱奥尼亚段内。我想保持页面的功能分离，以便于维护。目前我还没有找到解决办法，因为ionic不允许在一个页面中包含多个ion内容。是否有其他方法/建议/解决办法

我尝试将页面设置为tabroot，并在段页面中调用它们

这三页看起来像：

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

预期结果：

---

当我切换ionic段的选项卡时，页面内容会显示出来。我建议您像这样使用ngSwitch

[ngSwitch]=“mySegment”

，因此您不需要使用

tabRoot

和多个

离子内容来切换选项卡

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


管理请求
这是travelrequest的内容

以下是ApproverRequest内容

以下是approveexception内容


希望对您有所帮助。
您是否考虑过将“页面”功能放入一个角度组件（而不是完整的“页面”）中？根据我的经验，一个离子“页面”的处理方式是不同的，可能并不意味着要同时显示多个页面，特别是如果您正在使用。下面的简单CLI命令将生成一个组件。然后将UI/逻辑放在那里，并将该元素放在
离子段中

ionic generate component

。请注意，主页上有3个部分，中间的部分（书签）中有一个组件
 我不希望内容从包含该段的同一页面内加载。因为每一个都将有大约150-200行代码。最好把它们放在单独的页面中。我在使用这个方面取得了一些小的成功：
，但我想用segmentsAhh来做，好的！因此，我认为对你来说，一个好的方法可能不是细分市场。我试图避免使用第三方软件包，但感谢埃弗顿科斯塔的建议！谢谢你，布拉斯。我今天也曾想过这样做，但我被困在段将如何加载组件上，因为它抛出了一个错误，即：
无法绑定到“tabRoot”，因为它不是“ion segment button”的已知属性。
也尝试使用[root]而不是tabRoot。同样的错误。你能举个小例子来说明你是如何做到这一点的吗？同时，非常感谢你帮助了一个noob伙伴！我在上面抛出了一个快速示例链接。
<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>

ionic generate component