在 Angular 中删除或添加类

Question

我有一个列表和我使用的插件（ dragula ），在某些动作上添加了某些 CSS 类。我正在使用 Angular 5。我想找出某个类的存在（ myClass ）并将其删除并替换为（ yourClass ）。在 jQuery 中，我们可以这样做

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

如何在 Angular5 中实现这一点。这里的主要问题是插件自动将 myClass 添加到选定的 li 中。所以使用一个函数我不能设置类。

当我尝试使用 renderer2 时，它正在删除 CSS 类并添加另一个类。但它只添加到第一个 li 。我的代码是：

 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>

原文由 Senchu Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从角度核心导入 ElementRef 并在构造函数中定义然后尝试以下代码：

下面的代码行将为您提供来自组件的 <p> 标记的第一次出现。 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');

原文由 Sandip - Frontend Developer 发布，翻译遵循 CC BY-SA 3.0 许可协议