ionic 之 Segment 的简单使用

文档地址
文档有点小坑, 记录下.

先按照官方文档去编写代码

<ion-header>
  <ion-navbar >
      <div padding>
          <ion-segment [(ngModel)]="tabs">
            <ion-segment-button value="commodity">
              商品
            </ion-segment-button>
            <ion-segment-button value="details">
              详情
            </ion-segment-button>
          </ion-segment>
        </div>
  </ion-navbar>
</ion-header>

<ion-content>
  <div [ngSwitch]="tabs">
    <ion-list *ngSwitchCase="'commodity'">
      商品页面
    </ion-list>
  
    <ion-list *ngSwitchCase="'details'">
      详情页面
    </ion-list>
  </div>
</ion-content>

最后一步很关键,完成了上面的代码,是不能默认选种某一项的;
需要去ts后台设置默认选项

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  // 设置默认选中页面
  public tabs: string = 'commodity';

  constructor(public navCtrl: NavController) {

  }

}

Segment 的简单实用