切换类的角度 ngClass 和单击事件

在角度，我想使用 ngClass和单击事件切换类。我在网上看过了，但有些是棱角分明的，没有任何明确的说明或例子。任何帮助都将不胜感激！

在 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;
}
265144 次浏览
小开

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>

在:

status: boolean = false;
clickEvent(){
this.status = !this.status;
}
小开

不必在 ts 文件中创建函数，您可以从模板本身切换一个变量。然后可以使用该变量将特定类应用于元素。像这样

组件.html-

<div (click)="status=!status"
[ngClass]="status ? 'success' : 'danger'">
Some content
</div>

因此，当状态为真时，应用类成功; 当为假危险时，应用类成功。

这将不需要在 ts 文件中添加任何其他代码即可工作。
编辑: 角度的最新版本要求在控制器-中声明变量 组件. ts-

status: boolean = false;
小开

如果要用切换按钮切换文本。

使用 bootstrap 的 HTMLfile:

<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>

在其中:

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;
}
}
小开

如果你正在寻找一个 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;
}

这个。

selectColor(index: any) {
this.viewMode = index;
}

提交答案