Angular ngClass和click事件用于切换类

Question

在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;
}

- Steve Kim

Answer 1

这应该适用于你。

在 .html 中：

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

在 .ts 文件中：

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

- Mani S

---

只是一个快速的问题。第一次点击很好地添加了类，但第二次点击似乎没有起作用。根据您的代码，我看不出它如何将“状态”更改回“false”。 - Steve Kim

我已经更改了我的代码。你可以最初将其设置为false，然后该函数将切换布尔值为true<->false。 - Mani S

Answer 2

不必在 TypeScript 文件中创建函数，您可以直接从模板中切换变量。然后，您可以使用该变量将特定类应用于元素。就像这样 -

component.html -

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

当状态为true时，应用success类。当它为false时，应用danger类。

在ts文件中不需要任何其他代码即可正常工作。
编辑：最近的angular版本要求在控制器（component.ts）中声明变量 -

status: boolean = false;

- charsi

---

您需要在模板中声明“状态”吗？ - webworm

@Webworm 不需要在模板中声明 status。 - ANeves

这种方法是否也适用于ngFor中的div？因为我尝试了一下，但似乎angular将类更改为所有使用ngFor创建的div，而不仅仅是我点击的那个；谢谢。 - S-Wing

出现错误，提示“在类型<Component Name>上不存在属性'status'”。 - sin2akshay

@sin2akshay 看起来 Angular 最近有所改变，所以你需要先声明变量。我已经更新了上面的答案。 - charsi

Answer 3

使用renderer2的Angular6，不需要任何变量和干净的模板：

模板：

<div (click)="toggleClass($event,'testClass')"></div>

在Typescript中：

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);
    }
}

你也可以将其放入指令中;)

- neox5

---

不应使用保留关键字class。 - desertSniper87

这个解决方案在我的情况下不起作用。 - Arqam Rafay

你那边有什么问题吗？也许我可以帮忙 :) - neox5

Answer 4

ngClass应该放在方括号中作为属性绑定。尝试这样做：

[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;       
}

希望这能有所帮助。

- Saurabh Tiwari

Answer 5

如果你在Angular中正在寻找只使用HTML的方法来实现这个功能...

<div #myDiv class="my_class" (click)="myDiv.classList.toggle('active')">
  Some content
</div>

重要的是 #myDiv 部分。

它是一个 HTML 节点引用，因此你可以像分配给 document.querySelector('.my_class') 一样使用该变量。

注意：这个变量是作用域特定的，所以你可以在 *ngFor 语句中使用它。

- Craig Wayne

Answer 6

我们也可以使用ngClass根据多个条件来分配多个CSS类，如下所示：

<div
  [ngClass]="{
  'class-name': trueCondition,
  'other-class': !trueCondition
}"
></div>

- MiPhyo

Answer 7

如果您想使用切换按钮来切换文本。

使用Bootstrap的HTML文件：

<input class="btn" (click)="muteStream()"  type="button"
          [ngClass]="status ? 'btn-success' : 'btn-danger'" 
          [value]="status ? 'unmute' : 'mute'"/>

TS文件：

muteStream() {
   this.status = !this.status;
}

- Bilal Ahmad

Answer 8

你可以尝试这个。

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

- olorunshola matins

---

如何在组件失去焦点（取消选择）时取消颜色？ - Dumbo

Answer 9

通常情况下，您需要在类中创建一个备份变量，并在单击时切换它，并将类绑定到该变量。例如：

@Component(
    selector:'foo',
    template:`<a (click)="onClick()"
                         [class.selected]="wasClicked">Link</a>
    `)
export class MyComponent {
    wasClicked = false;

    onClick() {
        this.wasClicked= !this.wasClicked;
    }
}

- Hammad Ahmad