我有一个按钮,我想应用按钮的默认样式,当用户单击按钮时,将按钮样式颜色更改为红色,背景颜色更改为白色。 Blow 是我的 .css 和组件。
.btn-default {
color: white;
background-color: blue;
}
.btn-change {
color: Red;
background-color: white;
}
组件.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
bntStyle: string;
AppComponent() {
this. bntStyle = 'btn-default';
}
submit() {
this.bntStyle = 'btn-change';
}
.html
<div>
<button name="Save" [ngClass]="['bntStyle']" (onClick)="submit()">Submit</button>
</div>
最佳答案
我知道这对于解决方案来说为时已晚,但这可能对其他人有所帮助。
.html
<button [ngClass]="[btnStyle]" (click)="submit()">Submit</button>
.css.btn-default {
color: white;
background-color: blue;
}
.btn-change {
color: Red;
background-color: white;
}
.ts(提交功能中的 if-else 是在样式之间切换)
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
btnStyle = 'btn-default';
submit() {
if(this.btnStyle == 'btn-change') {
this.btnStyle = 'btn-default';
} else {
this.btnStyle = 'btn-change';
}
}
}
关于css - 应用默认样式和 onClick 更改按钮的样式-Angular 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48243620/