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

Question

在ionic2如何设置第一ion-segment-button的ion-segment是在active state？我曾尝试与提供这样做active class的ion-segment-button,如:

 <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是pet,并且在构造函数中它将pet设置为"puppies",因此离子段组件将使具有值'puppies'的按钮成为活动离子段按钮

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

Answer 2

在当前版本中执行此操作的正确方法如下:

在您的组件中:

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

这会将"小狗"设置为默认活动段