如何在点击时动态添加类并在 2 秒后将其删除？

Question

我不知道如何正确地提出我的问题，所以我会在这里尝试解释一下自己：

在我的 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>

在我的 ts 文件中，我这样做了：

 iconClicked(icon){
        setTimeout(()=> {
            icon = false
        }, 2000)
    }

但这根本不符合我的要求，因为它们都获得了类，并且 iconIsClicked 值不会返回到要分析的元素（很明显）。

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

谢谢

Answer 1

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

我想你可以记住这样的事情：一个指令允许你控制视图

我设法通过在每个 li 上使用带有 onClick 事件的 HostListener 轻松做到这一点

你有 stackblitz here

---

摘录： class-changer.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)
  }

---

编辑
我更新了我的堆栈闪电战。像这样，您可以轻松添加和删除类！

Answer 2

您的代码中存在不止一个问题。

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

2- 你不应该在模板文件中使用this。 this.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);
}

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

Answer 3

您可以使用template reference variable 和添加/删除（Element.classList 方法）。

HTML

<li class="fushia-icon">
    <a #fushiaIcon class="animated" (click)="iconClicked(fushiaIcon)"></a>
</li>
<li class="beige-icon">
    <a #beigeIcon class="animated" (click)="iconClicked(beigeIcon)"></a>
</li>

TS

iconClicked(menuIcon: HTMLElement) {
    menuIcon.classList.add('flip');

    setTimeout(()=> {
        menuIcon.classList.remove('flip');
    }, 2000)
}