文檔地址
文檔有點小坑, 記錄下.
先按照官方文檔去編寫代碼
<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 的簡單實用
