在Angular中删除或添加Class

Question

我有一个列表和dragula我使用的插件()在某些操作上添加了某些css类.我正在使用Angular5.我想找出某些class(myClass)的存在并删除它并替换为(yourClass).在jquery中,我们可以这样做

$( "p" ).removeClass( "myClass" ).addClass( "yourClass" );

我怎样才能在Angular5中实现这个目标.这里的主要问题是myClass自动添加到li插件所选的内容中.所以使用函数我不能设置类.

当我尝试使用renderer2时,它正在删除css类并添加另一个类.但它只是增加了第一个李.我的代码是

let myTag ; 
myTag = this.el.nativeElement.querySelector("li");
this.renderer.addClass(myTag, 'gu-mirrorss')
this.renderer.removeClass(myTag, 'dragbox');

`<div  class="right-height" id ='dest' [dragula]='"second-bag"' [dragulaModel]="questions"> 
       {{ questions.length == 0 ? ' Drag and drop questions here ' : ' '}}
       <li #vc  data-toggle="tooltip" data-placement="bottom" title= {{question.questionSentence}} class="well dragbox"  *ngFor="let question of questions; let i = index" [attr.data-id]="question.questionId" [attr.data-index]="i" (click)="addThisQuestionToArray(question,i, $event)" [class.active]="isQuestionSelected(question)"  #myId > {{question.questionId}} {{question.questionSentence}}</li>
</div>`

Answer 1

ElementRef从angular core 导入 并在构造函数中定义然后尝试下面的代码:

下面的代码行将为您提供第一次出现的<p>Component标签. querySelector为您提供第一项,并querySelectorAll为您提供DOM的所有项目.

import { Component, ElementRef } from "@angular/core";

constructor(private el: ElementRef) {
}

let myTag = this.el.nativeElement.querySelector("p"); // you can select html element by getelementsByClassName also, please use as per your requirement.

添加课程:

if(!myTag.classList.contains('myClass'))
{
    myTag.classList.add('myClass'); 
}

删除类:

myTag.classList.remove('myClass'); 

Answer 2

您可以在 html 中使用 id

<button #namebutton class="btn btn-primary">login</button>

在 your.ts 中添加 viewchild

@ViewChild('namebutton', { read: ElementRef, static:false }) namebutton: ElementRef;

创建一个将触发事件的函数

 actionButton() {
    this.namebutton.nativeElement.classList.add('class-to-add')
    setTimeout(() => {
      this.namebutton.nativeElement.classList.remove('class-to-remove')
    }, 1000);
  }
              

并调用该函数。

如果您的本机元素未定义，请检查此答案 Angular: nativeElement is undefined on ViewChild

Answer 3

以下是通过课程的多种方法

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

来自官方文档