如何在离子2中一次仅激活一个按钮

时间:2018-05-02 12:44:45

标签: angular typescript ionic-framework ionic2

我有四个按钮组

 <button round ion-button> David </button>

 <button round ion-button> Rocky</button>

 <button round ion-button> Chris</button>

 <button round ion-button> Johny</button>

我想在打字稿中一次只启动按钮(更改背景颜色)一个按钮。怎么办。

1 个答案:

答案 0 :(得分:1)

您可以使用export class YourPage { public active: string; // add this property constructor() { } // method to update the active property updateActive = name => this.active = name; } 指令有条件地将CSS类分配给您的活动按钮。要实现这一目标,您需要CSS类和.ts中的属性来了解活动按钮的内容。

所以你的.TS将是:

<button round ion-button [ngClass]="'your-css-class': active === 'david'" (click)="updateActive('david')"> David </button>

<button round ion-button [ngClass]="'your-css-class': active === 'rocky'" (click)="updateActive('rocky')"> Rocky</button>

<button round ion-button [ngClass]="'your-css-class': active === 'chris'" (click)="updateActive('chris')"> Chris</button>

<button round ion-button [ngClass]="'your-css-class': active === 'johny'" (click)="updateActive('johny')"> Johny</button>

然后更改您的HTML:

active

这应该有效,如果您需要一个按钮来启动活动,只需在str_extract属性中为其赋值。如果您的.ts文件中的活动按钮被管理,则只需删除click属性即可。如果您需要更多帮助,请点击Loops in Java – Ultimate Guide

希望这有帮助。

更新

更新为使用方法而不是直接在点击上分配值,如op要求的那样。