ionic组件-segment分段式导航

效果展示：

Ts代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.page.html',
  styleUrls: ['./news.page.scss'],
})

export class NewsPage implements OnInit {

  //定义一个tab
  public tab="tab3";

  constructor() { }

 ngOnInit() {}

  segmentChanged($event){
    console.log('$event');
  }

}

Html代码：

  <!--【ion-segment】可以进行双向数据绑定，加载时，首先判断下面的内容谁等于tab的值，默认显示谁的值-->
  <ion-segment [(ngModel)]="tab">
    <ion-segment-button value="tab1">
      <ion-label>分段式导航1</ion-label>
    </ion-segment-button>
    <ion-segment-button value="tab2">
      <ion-label>分段式导航2</ion-label>
    </ion-segment-button>
    <ion-segment-button value="tab3">
      <ion-label>分段式导航</ion-label>
    </ion-segment-button>
  </ion-segment>

  <!--数据绑定查看tab的内容-->
  <p> {{tab}} </p>

<!--采用【ngSwitch】的方法进行分段式导航的内容切换-->
 <div [ngSwitch]="tab">
    <section *ngSwitchCase="'tab1'">
      分段式导航内容1----注意写法*ngSwitchCase="'tab1'"
    </section>
    <section *ngSwitchCase="'tab2'">
      分段式导航内容2
    </section>
    <section *ngSwitchCase="'tab3'">
      分段式导航内容3
    </section>
  </div>