ionic3 segments 用法

描述 通过次级导航栏 点击对应的按钮 通过对应的按钮 点击传递的参数来显示哪个content下的内容
1 相关html

<ion-header>
<ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="pet">      双向绑定pet
      <ion-segment-button value="puppies">
        Puppies
      </ion-segment-button>
      <ion-segment-button value="kittens">
        Kittens
      </ion-segment-button>
      <ion-segment-button value="ducklings">
        Ducklings
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

2 相关js

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
@Component({
  templateUrl: 'template.html'
})
export class BasicPage {
  pet: string = "puppies";
  isAndroid: boolean = false;
  constructor(platform: Platform) {
    this.isAndroid = platform.is('android');
  }
}

3 通过内容来渲染content下的信息

<ion-content>
  <div [ngSwitch]="pet">        判断switch 情况
    <ion-list *ngSwitchCase="'puppies'">    情况1
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/img/thumbnail-puppy-2.jpg">
        </ion-thumbnail>
        <h2>Oscar</h2>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchCase="'kittens'">      情况2
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/img/thumbnail-kitten-1.jpg">
        </ion-thumbnail>
        <h2>Luna</h2>
      </ion-item>
    </ion-list>
    <ion-list *ngSwitchCase="'ducklings'">   情况3
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/img/thumbnail-duckling-1.jpg">
        </ion-thumbnail>
        <h2>Daffy</h2>
      </ion-item>
    </ion-list>
  </div>
</ion-content>