使用 Angular 将变量插入 class

Question

我想为我的元素动态生成一个 class 名称。例如， <span class=``icon icon-${route.title}``></span>（这里不得不使用双反引号，但实际上应该只是一组反引号。）

    <ul class="sidebar-list">
      <li *ngFor="let route of menuRoutes.items">
        <span class=`icon icon-${route.title}`></span>
        <a routerLink="/{{route.path}}" routerLinkActive="active">{{ 'menu.' + route.title | translate}}</a> 
      </li>
    </ul>

Answer 1

试试这个：

<span class="icon icon-{{route.title}}"></span>

Answer 2

您还可以使用 [ngClass] 指令

将其存档

<span [ngClass]="['icon', route.title]"></span>

使用 Angular 将变量插入 class

Interpolate variable into class with Angular

css

string-interpolation

angular