如何在angular中更改按钮样式onclick

Question

当点击事件被触发时，我需要更改按钮样式。

我浏览了一下，发现使用了[class]属性，但不知道如何实现它。一旦触发点击事件，我需要调用一个css类。

<button type="button" [disabled]="isdisabled"
style="background: #79CEA4 !important;color: #FFFFFF !important;font-size: 13px;font-weight: 600;margin-right: 10px"
class="btn  btn-lg"  (click)="start(tId,uId)"> START
</button>

Answer 1

在.ts(点击：boolean(中创建一个切换变量，并在点击事件处理程序方法中设置true。

接下来，将此属性添加到HTML元素：

[ngClass]="{'your-class' : clicked}"

如果单击的变量为true，它会用给定的类名附加css类列表。

Answer 2

这是使用单击event时的一个示例。

<button
type="button"
[disabled]="isdisabled"
style="
background: #79cea4 !important;
color: #ffffff !important;
font-size: 13px;
font-weight: 600;
margin-right: 10px;
"
class="btn btn-lg"
(click)="start($event,tId,uId)"
>START</button>

现在，在您的typescript和方法start中，您可以使用以下示例：

start(event: MouseEvent & { target: HTMLElement }, tId, uId): void {
console.log('start');
// change style
event.target.style.background = 'orange';
// add class
event.target.classList.add('example-class');
}

上面的代码只是一个例子。因为您可以使用[ngClass]或[ngStyle]。这是你的选择。