Question

我尝试使用ng-class，我需要在angular中创建动态类。但是找不到适合我的简单教程或类似内容。

例如，我有类似的东西： 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上输入mouseent之后，将同级div（.tag-name）从隐藏更改为显示。而且我真的不知道如何将更改的类与mouseEnter函数连接。

Answer 1

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

您创建了一些类（css / scss）
您可以根据某些条件将该类动态绑定到html元素。

示例

isBlack = true;

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

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

其中isBlack是基于该类的布尔值。

以下是完整的文档：LINK

如何理解角ng类和动态类

1 个答案: