在Angular中删除或添加类

18 浏览
0 Comments

在Angular中删除或添加类

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

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

在Angular 5中我该如何实现这个？这里的主要问题是插件会自动将myClass添加到选定的li中。因此，使用函数我无法设置该类。

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

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


 
       {{ questions.length == 0 ? '将问题拖放到这里' : ' '}}
       
  •  {{question.questionId}} {{question.questionSentence}}
    •

    0

    3 答案

    0 Comments

    在Angular中，有时我们需要在HTML元素上添加或删除类。但是，有时候在进行这些操作时会遇到问题。本文将讨论出现这个问题的原因以及解决方法。

    出现问题的原因可能是由于在使用ViewChild时，无法正确获取到HTML元素的引用。如果我们尝试在HTML中使用id来引用元素，然后在.ts文件中使用ViewChild来获取该元素的引用，有时候会遇到无法获取到正确引用的情况。

    为了解决这个问题，我们可以采用以下方法：

    首先，在HTML中使用id来引用元素。例如，我们可以给按钮添加一个id属性：

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

    然后，在.ts文件中使用ViewChild来获取元素的引用。我们需要使用ElementRef来读取元素的引用。代码如下：

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

    接下来，我们需要创建一个函数来触发事件。在这个函数中，我们可以通过nativeElement来访问元素，并使用classList来添加或删除类。以下是一个示例函数：

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

    最后，我们只需要调用这个函数即可。

    如果在获取原生元素的过程中遇到undefined的情况，我们可以参考以下答案来解决这个问题：[Angular: nativeElement is undefined on ViewChild](https://stackoverflow.com/questions/45921819)

    通过以上方法，我们可以在Angular中成功地添加或删除类，并解决在使用ViewChild时遇到的问题。

    0
    0 Comments

    在Angular中，有时我们需要在组件中添加或删除类。下面的代码展示了如何使用ElementRef来实现这个目标。

    首先，在组件中导入ElementRef：

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

    然后，在构造函数中定义ElementRef：

    constructor(private el: ElementRef) {
}

    接下来，我们可以使用el.nativeElement.querySelector方法来获取组件中第一个

    标签的引用：

    let myTag = this.el.nativeElement.querySelector("p");

    如果我们想要添加一个名为"myClass"的类，我们可以使用classList.add方法：

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

    如果我们想要移除"myClass"类，我们可以使用classList.remove方法：

    myTag.classList.remove('myClass');

    需要注意的是，使用ElementRef可能会引发XSS攻击，这在Angular文档中有所提及。为了更安全地实现添加或删除类的功能，可以考虑使用Renderer2。

    希望上述内容对你有所帮助。

    0
    0 Comments

    在Angular中，我们可以使用ngClass指令来添加或删除元素的类。上述内容展示了多种使用ngClass指令传递类的方式。

    问题的出现原因是有时候我们需要根据不同的条件来动态地添加或删除类。为了解决这个问题，Angular提供了ngClass指令，它允许我们在模板中根据条件来添加或删除类。

    解决方法是使用ngClass指令，并在中括号中传递一个表达式来确定要添加或删除的类。上述代码示例展示了多种使用ngClass指令的方式：

    1. 使用字符串传递类名：

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

    这将在some-element元素上添加名为"first"和"second"的类。

    2. 使用数组传递类名：

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

    这将在some-element元素上添加名为"first"和"second"的类。

    3. 使用对象传递类名：

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

    这将在some-element元素上添加名为"first"和"second"的类，同时删除名为"third"的类。

    4. 使用表达式传递类名：

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

    这将根据表达式的结果来确定要添加或删除的类。

    5. 使用对象语法传递类名：

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

    这将在some-element元素上添加名为"class1"、"class2"和"class3"的类。

    通过使用ngClass指令，我们可以根据条件动态地添加或删除元素的类，从而实现更灵活的样式控制。这对于创建响应式的用户界面非常有用。

    0