在离子框架中，如何默认将第一个离子段按钮设置为活动状态？

Question

在ionic2中如何将ion-segment中的第一个ion-segment-button设置为active state？我已经尝试通过向ion-segment-button提供active class来实现，如下所示：

 <div padding>
    <ion-segment [(ngModel)]="home_tabs">
        <ion-segment-button class="segment-button segment-activated"  value="A">A
        </ion-segment-button>
        <ion-segment-button value="B">B
        </ion-segment-button>
    </ion-segment>
</div>

但这并不管用。我想让第一个ion-segment-button处于非活动状态，

<ion-list *ngSwitchWhen="'A'" ></ion-list>

变为活动状态。该怎么做呢？

Answer 1

这应该是有帮助的：http://ionicframework.com/docs/v2/components/#segment

此外，如果您在开始时没有home_tabs的值，那么离子段组件将不知道您到底想要什么。要解决这个问题，可以在构造函数上默认设置home_tabs = 'A‘，这样第一个按钮就会始终处于活动状态

这在您的组件中：

export class SegmentPage {
   constructor() {      
     this.pet = "puppies";
 }
}

这是在您的html中：

<ion-segment [(ngModel)]="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>

您可以看到ngModel是宠物，并且在构造函数中将宠物设置为"puppies“，因此离子段组件将使具有值”puppies“的按钮成为活动的离子段按钮

https://github.com/driftyco/ionic-preview-app/tree/master/app/pages/segments/basic

Answer 2

在当前版本中，正确的方法如下：

在您的组件中：

export class SegmentPage {
 pet: string = "puppies";
   constructor() {}
}

这会将"puppies“设置为默认的活动段

Answer 3

离子4:-我们可以写离子段的值属性-

<ion-segment (ionChange)="segmentChanged($event)" 
      value="javascript">
      <ion-segment-button value="python">
        <ion-label>Python</ion-label>
      </ion-segment-button>
      <ion-segment-button value="javascript">
        <ion-label>Javascript</ion-label>
      </ion-segment-button>
    </ion-segment>