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

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

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

我通过将HostListener与每个li上的onClick事件配合使用来轻松做到这一点

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

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

HTML

for num in str(my_integer):
    print(num)

TS

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

Answer 3

您的代码中存在多个问题。

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。

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

3 个答案: