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

你可以使用 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)
}

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

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

通过使用一个主机侦听器,在每个主机上都有一个onClick事件,我很容易做到这一点 li

你有闪电战 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)
  }

编辑

代码中存在多个问题。

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

2-你不应该使用 this this.iconIsClicked 不是有效的值。

3-你打电话想达到什么目的 iconClicked(this.iconIsClicked = true) )。因此 iconClicked()

如果您尝试添加css类 .flip 到 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