3

ionic v3 的新手。我有三个离子页面，我试图在离子段内显示。我想保持页面的功能分离，以便于维护。目前我还没有找到解决方法，因为 ionic 在页面中不允许超过一个离子含量。还有其他方法/建议/解决方法吗？

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

这三个页面如下所示：

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

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

管理请求.ts

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

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

4

2 回答 2

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>

希望它可以帮助你。

于 2018-12-23T16:50:19.973 回答
0

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

ionic generate component

这是我在 Stackblitz 上创建的一个简单示例。请注意，主页上有 3 个段，中间的段（书签）中有一个组件。

于 2018-12-24T14:08:53.243 回答