Angular 用于切换的 ngClass 和点击事件 class

Question

在Angular中，我想使用ngClass和点击事件来切换class。我在网上浏览过，但有些是 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;
}

Answer 1

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

希望对您有所帮助。

Answer 2

这应该适合你。

在.html:

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

在 .ts 中：

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

Answer 3

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

component.html-

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

因此，当状态为真时，应用 class 成功。当它是错误的危险时 class 被应用。

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

status: boolean = false;

Answer 4

如果你想用切换按钮切换文本。

HTML 文件正在使用 bootstrap:

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

TS 文件：

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

Answer 5

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

也可以把它放在指令中 ;)

Answer 6

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

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

Answer 7

所以通常您会在 class 中创建一个支持变量并在单击时切换它并将 class 绑定绑定到该变量。类似于：

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

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

Answer 8

如果您在 angular 中寻找 HTML 的唯一方法...

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

重要的一点是 #myDiv 部分。

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

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

Answer 9

你可以试试这个。

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

Angular 用于切换的 ngClass 和点击事件 class

Angular ngClass and click event for toggling class

angular-ng-class

angular