在 Angular 中删除或添加类

Posted 2023-03-13

【中文标题】在 Angular 中删除或添加类

【英文标题】：Remove or add class in Angular

【发布时间】：2018-08-02 04:21:48

【问题描述】：

我有一个列表和我使用的插件 (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>

【问题讨论】：

在“角度方式”中，您使用 [ngClass]="'class1':condition1,'class2':condition2"

你想在打字稿中添加/删除吗？

@SandipPatel 是的。我认为 [ngClass]="'class1':condition1,'class2':condition2" 是不可能的，因为列表会动态变化，并且该类是由插件添加的，我希望它在特定条件下删除

[ngClass] 在这种情况下不起作用，因为插件添加了类。您需要使用 ElementRef 找到它并手动将其删除。

【参考方案1】：

你可以在你的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

【参考方案2】：

这里有多种传递课程的方法

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

来自Official Docs

【参考方案3】：

最好和最简单的方法是：-

如果学生为空，则禁用，否则不禁用。在按钮属性中使用它。如果您使用的是引导主题

[ngClass]="disabled: (students === null) ? true : false"

【参考方案4】：

如果你想改变所有的 li.myClass，你可以这样做：

注意容器 div 中的 #questions。

组件.ts

@ViewChild('questions') questions: any;

questions.nativeElement.querySelectorAll('.myClass').forEach(
  question => 
    question.classList.remove('myClass');
    question.classList.add('newClass');
  
)

组件.html

<div #questions 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>

【讨论】：

我收到 TypeError：无法读取未定义的属性“nativeElement”。因为使用this.questions.nativeElement.querySelectorAll 因为我在函数中使用了这个

对不起，我没有理解正确，现在可以了吗？

【参考方案5】：

从 Angular 核心导入 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'); 

【讨论】：

使用 ElemntRef 它正在工作，但角度文档说使用 ElementRef 可能会导致 xss 攻击https://angular.io/api/core/ElementRef

这是满足您要求的方法

是的，当然可以使用任何安全方式

我认为可以使用 Renderer2 https://angular.io/api/core/Renderer2。我没有测试过