ng-case/src/app/tab1/tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      教学案例库
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">教学案例库</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-segment [(ngModel)]="currentTab">
    <ion-segment-button value="static">
      纯静态案例
    </ion-segment-button>
    <ion-segment-button value="parse">
      微服务案例
    </ion-segment-button>
  </ion-segment>
  <div *ngIf="safeHTML" [innerHTML]="safeHTML"></div>
  
  <ion-card>
    <ion-card-title>纯静态案例</ion-card-title>
    <ion-card-content>
      <ion-button expand="block" routerLink="/study/tsdatatype">语法：TS数据类型与模板</ion-button>
      <ion-button expand="block" routerLink="/study/case-edit">交互：输入编辑组件</ion-button>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-title>第三方组件(非Angular)</ion-card-title>
    <ion-card-subtitle>
      该类组件,一般为js组件,通过types实现的兼容调用
    </ion-card-subtitle>
    <ion-card-content>
      <ion-button expand="block" routerLink="/study/slider">展示：Swiper轮播图插件</ion-button>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-title>微服务案例</ion-card-title>
    <ion-card-content>
      <ion-button expand="block" (click)="openGit()">代码：study-ng-contact</ion-button>
      <ion-button expand="block" routerLink="/tabs/tab2">示例：通讯录列表</ion-button>
      <ion-button expand="block" routerLink="/aigc/chat">示例：AI对话示例</ion-button>
    </ion-card-content>
  </ion-card>

</ion-content>