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()">
          <ion-icon slot="bottom" name="more"></ion-icon>
          发布          
        </ion-item-option>
        <ion-item-option color="secondary">
          <ion-icon slot="bottom" name="archive"></ion-icon>
          删除
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <ion-list *ngIf = "isTrue == 'true2'">
      <ion-item-sliding *ngIf="startID==undefined" #slide (click)="open()">
        <ion-item>
          <ion-label>
            模板二
          </ion-label>
        </ion-item>
        <ion-item-options>
          <ion-item-option color="primary" (click)="Release2()">
            <ion-icon slot="bottom" name="more"></ion-icon>
            发布          
          </ion-item-option>
          <ion-item-option color="secondary">
            <ion-icon slot="bottom" name="archive"></ion-icon>
            删除
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>

    <ion-list *ngIf = "isTrue == 'true3'">
      3333
    </ion-list>

3. 我们写ts代码：定义一个变量用来显示不同内容

1） 在export下面定义一个变量，用来显示不同内容
isTrue: string;

2）我们在第一个代码块找到三个方法，分别在这三个方法里面写上不同内容。

enableTemplate(startID: string) {
  this.isTrue = 'true1';
}

applicationTemplate(suspend: string) {
  this.isTrue = 'true2';
}

recordTemplate(record: string) {
  this.isTrue = 'true3';
}


// 然后我们会在第二块html代码的开头出会找到我的这个三个true标识

方法二：就是我们现在用的，利用segment按钮来显示，这个时候我们直接用html即可标识，但是需要在ts里面定义一个参数即可：（推荐使用）

1. 我们先写一个segment的按钮模式，利用ngmodel实现双向绑定。

  <div> 
    <!-- 双向绑定数据，设定value的值，然后在下面的方法中选择 -->
    <!-- ionchange是个方法，每次点击都会执行一次，现在没有用到 -->
     <ion-segment [(ngModel)] = "isTrue" (ionChange)="segmentChanged($event)">
      <ion-segment-button value="Friends">
        <ion-label>启用模板</ion-label>
        <ion-icon name="play"></ion-icon>
      </ion-segment-button>

      <ion-segment-button value="Enemies">
        <ion-label>应用中</ion-label>
      </ion-segment-button>

      <ion-segment-button value="streee">
        <ion-label>评教记录</ion-label>
      </ion-segment-button>
    </ion-segment>
  </div>

2. 我们在HTML继续写：我们需要显示的内容：

// 此三个框框用来在三个不同页面显示，直接在上面 那个div下面接着写即可。
 <div>
      <ion-list *ngIf = "isTrue == 'Friends'">
        <ion-item-sliding #slide (click)="close()">
          <ion-item>
            <ion-label>
              模板一
            </ion-label>
          </ion-item>
          <ion-item-options >
            <ion-item-option color="primary" (click)="Release()">
              <ion-icon slot="bottom" name="more"></ion-icon>
              发布          
            </ion-item-option>
            <ion-item-option color="secondary">
              <ion-icon slot="bottom" name="archive"></ion-icon>
              删除
            </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
      </ion-list>
    </div>
    <div>
      <ion-list *ngIf = "isTrue == 'Enemies'">
        <ion-item-sliding #slide (click)="open()">
          <ion-item>
            <ion-label>
              模板二
            </ion-label>
          </ion-item>
          <ion-item-options>
            <ion-item-option color="primary" (click)="Release2()">
              <ion-icon slot="bottom" name="more"></ion-icon>
              发布          
            </ion-item-option>
            <ion-item-option color="secondary">
              <ion-icon slot="bottom" name="archive"></ion-icon>
              删除
            </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
      </ion-list>
  
    </div>
    <div>
      <ion-list *ngIf = "isTrue == 'streee'">
        3333
      </ion-list> 
    </div>

3. 我们在ts里面定义这个isTrue 字段：

isTrue: string;

方法三：此方法用于显示不同的控件和页面，不太适合在这里用，介绍一下：

1. 这个可以在浏览器中的Application中可以找到，我们在找到的这个字段显示与否。
   
2. 我们首先在ts方法里面放置一个字段，比方说我们在上面其中一个方法写上：

applicationTemplate(suspend: string) {
  localStorage.setItem('suspend', '1111');  // 表示在浏览器中放置一个字段suspennd localStorage.removeItem('startID');      // 表示在浏览器中移除一个字段“startID
  this.isTrue = 'true2';    // 这个是上面的一个方法里面的，没有用。
}

3. 如果我们需要显示的地方我们则获取；

// 我们在此方法里面显示，然后这个方法就会显示这个带有参数的。
open() {
  localStorage.getItem('suspend');
  localStorage.removeItem('startID');
}

4. 这个时候我们就利用：*ngIf=“startID==undefined” 这段代码来显示：

 <ion-list *ngIf = "isTrue == 'true2'">
      <ion-item-sliding *ngIf="startID==undefined" #slide (click)="open()">  // 这个地方即可。
        <ion-item>
          <ion-label>
            模板二
          </ion-label>
        </ion-item>
        <ion-item-options>
          <ion-item-option color="primary" (click)="Release2()">
            <ion-icon slot="bottom" name="more"></ion-icon>
            发布          
          </ion-item-option>
          <ion-item-option color="secondary">
            <ion-icon slot="bottom" name="archive"></ion-icon>
            删除
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>