有没有办法在离子段内加载离子页面？

Question

ionic v3 的新手。我有三个离子页面，我试图在离子段内显示它们。我想将页面的功能分开以便于维护。目前我还没有找到解决方法，因为 ionic 不允许在一个页面中使用多个离子内容。还有其他 approach/suggestions/workarounds?

我试过将页面设置为 tabRoots 并在段页面中调用它们

三个页面看起来像：

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

显示选项卡的主页如下所示：管理-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>

管理-request.ts

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

预期结果：当我切换离子段的标签时显示页面内容

Answer 1

我建议你像这样使用 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>

希望对你有帮助。

Answer 2

您是否考虑过将 "page" 功能放入 angular 组件（而不是成熟的 Ionic "page"）？根据我的经验，Ionic "page" 的处理方式不同，可能并不意味着一次显示多个，特别是如果您使用 IonicPage。下面的简单 CLI 命令将生成一个组件。然后把你的 UI/Logic 放在那里，然后把那个元素放在你的 ion-segment.

ionic generate component

Here is a quick example I whipped up on Stackblitz。请注意主页上有 3 个部分，中间部分（书签）中有一个组件。

有没有办法在离子段内加载离子页面？

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

ionic3

ion-segment