Question

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

我尝试将页面设置为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>

manage-request.ts

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

预期结果：当我切换离子键的标签时，页面的内容会显示出来

Answer 1

我建议您像这样[ngSwitch]="mySegment"使用ngSwitch，这样就无需使用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

您是否考虑过将“页面”功能放在一个有角度的组件中（而不是成熟的Ionic“页面”）？以我的经验，对离子的“页面”的处理方式有所不同，可能并不意味着一次显示很多，尤其是在使用IonicPage的情况下。下面的简单CLI命令将生成一个组件。然后将您的UI /逻辑放入其中，并将该元素放入您的ion-segment。

ionic generate component

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

有没有办法将离子页面加载到离子片段内部？

2 个答案: