ionic4--tab/segment(单显不同内容）

前言

我们今天制作一个利用同一个页面显示不同的内容，那么我们今天利用官网中的tab和segment制作一下。

方法实战

方法一：标签法–利用tab（比较j简单）

1. 首先我们写html代码：用来显示下面三个不同的标识

<div>
    <ion-tabs slot="top">
      <ion-tab-bar>
        <ion-tab-button  (click)="enableTemplate()">
          <ion-label>启用模板</ion-label>
          <ion-icon name="play"></ion-icon>
        </ion-tab-button>

        <ion-tab-button (click)="applicationTemplate()">
          <ion-label>应用中</ion-label>
          <ion-icon name="pause"></ion-icon>
        </ion-tab-button>
        <ion-tab-button (click)="recordTemplate()">
          <ion-label>评教记录</ion-label>
          <ion-icon name="checkmark"></ion-icon>
        </ion-tab-button>
      </ion-tab-bar>

    </ion-tabs>
  </div>

2. 我们写html代码：用来显示不同的内容，共三个

  <ion-list *ngIf = "isTrue == 'true1'">
    <ion-item-sliding *ngIf="startID==undefined" #slide  (click)="close()">
      <ion-item>
        <ion-label>
          模板一
        </ion-label>
      </ion-item>
      <ion-item-options >
        <ion-item-option color="primary" (click)="Release()">