如何加载离子段内的其他页面？

任何人都知道如何加载离子段内的其他页面。我正在使用 ionic v4 我有三页试图在离子段内部显示（概况、疫苗接种、发育）。我想将页面的功能分开以便于维护。

这是孩子的详细信息页面 https://i.stack.imgur.com/pta0M.png

孩子详情.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>

有人知道怎么做吗 ？先感谢您