如何理解 angular ng-class 和动态 class

Question

我尝试使用 ng-class，我需要在 angular 中创建动态 class。但是找不到对我来说简单明了的教程之类的。

例如我有这样的东西： app.template.html

<div class="items-container" >
    <ul>
        <li class="item" *ngFor="let tag of tags">
            <div class="icon" ng-mouseenter="mouseEnter(tag.name)">
                <img src="/assets/{{tag.icon}}" />
            </div>
            <div ngClass="{'show' : false, 'hide' : true, 'tag-name'}">
                {{tag.name}}
            </div>
        </li>
    </ul>

</div>

app.ts

export class AGmainMenu {

    tags = mainMenuItems[0].tags;
    itemShow: false;

    mouseEnter(tag){
        console.log("mouse enter : ", this, tag);
    }
}

而且我希望在 div.icon 上的鼠标输入之后，兄弟 div (.tag-name) 将 class 从隐藏更改为显示。而且我真的不知道如何将更改 class 与函数 mouseEnter 联系起来。

Answer 1

在基地中，它的工作方式如下：

你创造了一些class (css/scss)
您可以根据某些条件将 class 动态绑定到您的 html 元素。

例子

isBlack = true;

div.my-dynamic-class {
  background-color: #000000;
  }

<div [ngClass]="{'my-dynamic-class': isBlack}"></div>

其中 isBlack 将是基于将应用 class 的布尔值。

这里是完整的文档：LINK

如何理解 angular ng-class 和动态 class

how to understand angular ng-class and dynamic class

ng-class

angular