如何在离子段内加载其他页面?

时间:2019-06-02 05:46:17

标签: ionic-framework ionic3 ionic4

任何人都知道如何在离子段中加载其他页面。我;使用离子v4 我有三个页面要显示在离子部分(轮廓,疫苗接种,发育)中。我想保持页面的功能隔离,以便于维护。

Here is the childdetails page

childdetails.page.html

<ion-content padding>
    <ion-toolbar>
      <ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="segment" color="warning">
        <ion-segment-button value="profile" (ionSelect)="goToProfilePage()">
         Profile
        </ion-segment-button>
        <ion-segment-button value="vaccination">
          Vaccination
        </ion-segment-button>
        <ion-segment-button value="development">
          Development
        </ion-segment-button>
      </ion-segment>
    </ion-toolbar>

    <div [ngSwitch]="segment">
        <ion-list *ngSwitchCase="'profile'">
          <<**I would like to include addchild.html here**>>
        </ion-list>
</div>
</ion-content>

childdetails.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-childdetails',
  templateUrl: './childdetails.page.html',
  styleUrls: ['./childdetails.page.scss'],
})
export class ChilddetailsPage implements OnInit {
/** 
  segment = 0;
  */
  segment: string = "vaccination";
  constructor() {}

  ngOnInit() {
  }

  async segmentChanged() {
    this.segment}

}

我不希望从包含以下代码段的同一页面内加载内容。因为它们每个都接近150-200行代码。最好将它们放在单独的页面中。

<div [ngSwitch]="segment">
        <ion-list *ngSwitchCase="'profile'">
          <p> I dont want it to be like this </p>
        </ion-list>
</div>

有人知道该怎么做吗?预先谢谢你

0 个答案:

没有答案