Html 如何在单击时动态添加类，并在2秒钟后将其删除？

我不知道如何恰当地表述我的问题，因此我将尝试在这里解释我自己：

在我的Angular 7应用程序中，我有一个导航栏，上面有图标作为菜单项

单击后，我希望他们获得某个类，该类必须在2秒后解除

我有7个元素，这里有2个作为示例：

        <li class="fushia-icon">
            <a routerLink="/savoir" routerLinkActive="fushia-icon-active" class="animated"
               [class.flip]="this.iconIsClicked" (click)="iconClicked(this.iconIsClicked = true)">
            </a>
        </li>


        <li class="beige-icon">
            <a routerLink="/diplomes" routerLinkActive="beige-icon-active" class="animated"
               [class.flip]="this.iconIsClicked" (click)="iconClicked(this.iconIsClicked = true)">  
            </a>
        </li>

但这根本不能满足我的要求，因为它们都得到了类，而且iconIsClicked值不会返回到要分析的元素（很明显）

我知道我可以用7个变量创建7个函数，这样每个图标都有自己的东西，但我正在寻找一种不重复代码的更快方法

---

谢谢

所以我们的目标是对每个菜单使用相同的方法。这里的简单选择是使用一个指令，它可以轻松地实现我们想要实现的目标

我认为您可以记住这样的事情：指令允许您控制视图

通过在每个

li

li上使用带有onClick事件的HostListener，我很容易做到这一点

你有闪电战

---

摘录：类别转换程序.directive.ts

constructor(private _ren: Renderer2, private _el: ElementRef) { }

@HostListener('click') onClick() {
    this._ren.addClass(this._el.nativeElement, 'bg-red');
    setTimeout(() => {
      this._ren.removeClass(this._el.nativeElement, 'bg-red');
    }, 2000)
  }

---

编辑

---

我更新我的stackblitz。这样，您就可以轻松地添加和删除类

因此，我们的目标是对每个菜单使用相同的方法。这里的简单选择是使用一个指令，它可以轻松地实现我们想要实现的目标

我认为您可以记住这样的事情：指令允许您控制视图

通过在每个

li

li上使用带有onClick事件的HostListener，我很容易做到这一点

你有闪电战

---

摘录：类别转换程序.directive.ts

constructor(private _ren: Renderer2, private _el: ElementRef) { }

@HostListener('click') onClick() {
    this._ren.addClass(this._el.nativeElement, 'bg-red');
    setTimeout(() => {
      this._ren.removeClass(this._el.nativeElement, 'bg-red');
    }, 2000)
  }

---

编辑

---

我更新我的stackblitz。这样，您就可以轻松地添加和删除类

代码中存在多个问题

1-您需要使用

[ngClass]

而不是

[class]

2-不应在模板文件中使用

此

<代码>此.iconIsClicked不是有效值

3-通过调用

iconClicked（this.iconIsClicked=true）

，您试图实现什么？当您传递原语时，它没有意义（表示您不是通过引用传递的）。因此，

iconClicked（）

方法中的修改不会影响模板，因为当函数返回时，模板的作用域结束

如果您尝试将css类

.flip

添加到单击的

li

，您可以做几件事。也许你可以像下面这样做。由于

li

项是静态的，因此需要为每个项提供一个模板引用，例如

#diplomesLiRef

，并将其传递给组件的方法

模板文件

<li class="beige-icon">
    <a routerLink="/diplomes" 
        routerLinkActive="beige-icon-active"
        #diplomesLiRef
        class="animated"
        (click)="toggleClass(diplomesLiRef, 'flip')">  
    </a>
</li>

toggleClass = (liRef, cssClass) => {
    liRef.classList.add(cssClass);
    setTimeout(() => {liRef.classList.remove(cssClass)},2000);
}

---

但是，正如您问题的评论者所说，完成您需要的任务的最佳方法是创建一个

指令
您的代码中有多个问题

1-您需要使用
[ngClass]
而不是
[class]

2-不应在模板文件中使用
此
<代码>此.iconIsClicked
不是有效值

3-通过调用
iconClicked（this.iconIsClicked=true）
，您试图实现什么？当您传递原语时，它没有意义（表示您不是通过引用传递的）。因此，
iconClicked（）
方法中的修改不会影响模板，因为当函数返回时，模板的作用域结束

如果您尝试将css类
.flip
添加到单击的
li
，您可以做几件事。也许你可以像下面这样做。由于
li
项是静态的，因此需要为每个项提供一个模板引用，例如
#diplomesLiRef
，并将其传递给组件的方法

模板文件

<li class="beige-icon">
    <a routerLink="/diplomes" 
        routerLinkActive="beige-icon-active"
        #diplomesLiRef
        class="animated"
        (click)="toggleClass(diplomesLiRef, 'flip')">  
    </a>
</li>

toggleClass = (liRef, cssClass) => {
    liRef.classList.add(cssClass);
    setTimeout(() => {liRef.classList.remove(cssClass)},2000);
}

但是，正如你问题的评论者所说，完成你所需要的最好方法是创建一个
指令
你可以使用和添加/删除（方法）。

HTML

您可以使用和添加/删除（方法）。

HTML

你的
li
s是在一个循环中还是静态的？我认为对你来说最好的方法是使用一个指令来实现你想要的！我将try@xyz不，是的static@naspy971正如建议的那样，指令是一个很好的主意。你的
li
s是在循环中还是静态的？我认为对你来说最好的方法是使用指令来实现你想要的！我将try@xyz不，是的static@naspy971正如建议的那样，指令是个好主意。他完全可以使用[class.flip]，这是允许的！看这里：@BenThie你是对的。该用法有效：。谢谢您的澄清。@HarunYılmaz没问题；）他完全可以使用[class.flip]，这是允许的！看这里：@BenThie你是对的。该用法有效：。谢谢您的澄清。@HarunYılmaz没问题；）