在Angular 6中,可以通过以下步骤来在点击按钮上设置活动类:
(click)
指令来绑定一个名为onButtonClick()
的方法:<button (click)="onButtonClick()">点击按钮</button>
onButtonClick()
方法,并在该方法中设置一个布尔类型的变量来表示按钮的活动状态。例如,可以定义一个名为isActive
的变量,并在点击按钮时将其值设置为true
:isActive: boolean = false;
onButtonClick() {
this.isActive = true;
}
[class.active]
属性绑定来动态设置按钮的活动类。根据isActive
变量的值,决定是否添加active
类:<button (click)="onButtonClick()" [class.active]="isActive">点击按钮</button>
active
类的样式。例如,可以设置背景颜色为蓝色:.active {
background-color: blue;
}
这样,当点击按钮时,isActive
变量的值将被设置为true
,按钮将添加active
类,从而应用定义的样式。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)
领取专属 10元无门槛券
手把手带您无忧上云