html

通过[(ngModel)]="contact"绑定 segment,给<ion-segment-button></ion-segment-button>写上value来标记指定的segment-buttom

[ngSwitch]="contact"绑定需要显示的界面元素,

再用*ngSwitchCase="'new'"选择之前绑定的value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<ion-header>
<ion-toolbar>
<ion-segment [(ngModel)]="contact" [(ngModel)]="contact">
<ion-segment-button value="new">
动态
</ion-segment-button>
<ion-segment-button value="message">
消息
</ion-segment-button>
<ion-segment-button value="contact">
聊天
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>

<ion-content>
<div [ngSwitch]="contact">
<ion-list *ngSwitchCase="'new'">

</ion-list>
<ion-list *ngSwitchCase="'message'">

</ion-list>
<ion-list *ngSwitchCase="'contact'">

</ion-list>
</div>
</ion-content>

ts

我们还需要指定默认显示的segment,只需要用在html文件中用[(ngModel)]双向绑定的对象设为某个segment-buttonvalue值就行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

import {DynamicPage} from '../contact/dynamic';

@Component({
templateUrl: 'build/pages/contact/contact.html'
})
export class ContactPage {
public contact: string = "new";
constructor(private navCtrl: NavController) {

}
}

引用的官方文档

官方的参考Demo