在 Angular 中，我想使用 ngClass 并单击事件来切换类。我在网上浏览过，但有些是 angular1 并且没有任何明确的说明或示例。任何帮助将不胜感激！
在 HTML 中，我有以下内容：
<div class="my_class" (click)="clickEvent($event)" ngClass="{'active': toggle}">
Some content
</div>
在.ts:
clickEvent(event) {
// Haven't really got far
var targetEle = event.srcElement.attributes.class;
}
【问题讨论】：
ngClass 应该用方括号括起来，因为这是一个属性绑定。试试这个：
<div class="my_class" (click)="clickEvent($event)" [ngClass]="{'active': toggle}">
Some content
</div>
在您的组件中：
//define the toogle property
private toggle : boolean = false;
//define your method
clickEvent(event){
//if you just want to toggle the class; change toggle variable.
this.toggle = !this.toggle;
}
希望对您有所帮助。
【讨论】：
这应该适合你。
在 .html 中：
<div class="my_class" (click)="clickEvent()"
[ngClass]="status ? 'success' : 'danger'">
Some content
</div>
在 .ts 中：
status: boolean = false;
clickEvent(){
this.status = !this.status;
}
【讨论】：
status 更改回false。
您可以从模板本身切换变量，而不必在 ts 文件中创建函数。然后，您可以使用该变量将特定类应用于元素。就这样-
component.html -
<div (click)="status=!status"
[ngClass]="status ? 'success' : 'danger'">
Some content
</div>
因此，当状态为真时，应用类成功。当它是错误的危险等级时应用。
这无需在 ts 文件中添加任何额外代码即可工作。
编辑：最新版本的角度需要在控制器中声明变量 -
组件.ts -
status: boolean = false;
【讨论】：
status。
如果您想使用切换按钮切换文本。
正在使用引导程序的 HTML 文件：
<input class="btn" (click)="muteStream()" type="button"
[ngClass]="status ? 'btn-success' : 'btn-danger'"
[value]="status ? 'unmute' : 'mute'"/>
TS 文件：
muteStream() {
this.status = !this.status;
}
【讨论】：
Angular6 使用没有任何变量的 renderer2 和一个干净的模板：
模板：
<div (click)="toggleClass($event,'testClass')"></div>
在ts中：
toggleClass(event: any, className: string) {
const hasClass = event.target.classList.contains(className);
if(hasClass) {
this.renderer.removeClass(event.target, className);
} else {
this.renderer.addClass(event.target, className);
}
}
也可以将其放入指令中；）
【讨论】：
我们还可以使用 ngClass 来根据多个条件分配多个 CSS 类，如下所示：
<div
[ngClass]="{
'class-name': trueCondition,
'other-class': !trueCondition
}"
></div>
【讨论】：
所以通常你会在类中创建一个支持变量并在单击时切换它并将类绑定绑定到该变量。比如：
@Component(
selector:'foo',
template:`<a (click)="onClick()"
[class.selected]="wasClicked">Link</a>
`)
export class MyComponent {
wasClicked = false;
onClick() {
this.wasClicked= !this.wasClicked;
}
}
【讨论】：
如果您正在寻找一种在 Angular 中仅使用 HTML 的方式...
<div #myDiv class="my_class" (click)="myDiv.classList.toggle('active')">
Some content
</div>
重要的一点是#myDiv 部分。
这是一个 HTML 节点引用，因此您可以像分配给 document.querySelector('.my_class') 一样使用该变量
注意：此变量是特定于范围的，因此您可以在*ngFor 语句中使用它
【讨论】：
你可以试试这个。
HTML。
<button *ngFor="let color of colors; let index=index" class="example1"
(click)="selectColor(index)" [class.choose__color]="viewMode == index">
<mat-icon>fiber_manual_record</mat-icon>
</button>
css.
.example1:hover {
border-bottom: 2px solid black;
}
.choose__color {
border-bottom: 2px solid black;
}
ts.
selectColor(index: any) {
this.viewMode = index;
}
【讨论】：