72

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

9 回答 9

141

这应该适合你。

在 .html 中：

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

在 .ts 中：

status: boolean = false;
clickEvent(){
    this.status = !this.status;       
}
于 2017-06-14T04:41:33.113 回答
71

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

组件.html -

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

因此，当状态为真时，将应用课程成功。当它是错误的危险等级时应用。

这将在 ts 文件中没有任何附加代码的情况下工作。
编辑：最近版本的角度需要在控制器中声明变量 - component.ts -

status: boolean = false;
于 2018-01-30T11:52:39.170 回答
37

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

也可以将其放入指令中；）

于 2018-08-17T10:44:29.843 回答
13

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

希望有帮助。

于 2017-06-14T04:40:44.953 回答
7

如果您正在寻找一种仅在 HTML 中执行此操作的方式...

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

重要的是#myDiv部分。

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

注意：此变量是特定于范围的，因此您可以在*ngFor语句中使用它

于 2021-02-14T22:26:32.313 回答
2

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

<div
  [ngClass]="{
  'class-name': trueCondition,
  'other-class': !trueCondition
}"
></div>
于 2019-06-19T07:17:01.300 回答
1

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

使用引导程序的 HTML 文件：

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

TS 文件：

muteStream() {
   this.status = !this.status;
}
于 2018-06-29T11:17:03.503 回答
1

所以通常你会在类中创建一个支持变量并在单击时切换它并将类绑定绑定到变量。就像是：

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

    onClick() {
        this.wasClicked= !this.wasClicked;
    }
}
于 2019-11-18T03:35:17.360 回答
1

你可以试试这个。

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;
}
于 2021-07-08T21:56:11.357 回答