Angular 6 NgClass 更改标签中的 css 类答案

【问题标题】：Angular 6 NgClass change css class which is in the tagAngular 6 NgClass 更改标签中的 css 类
【发布时间】：2018-07-13 07:59:41
【问题描述】：

我有一个如下所示的 CSS 文件：

aside {
  .myClass {
    ul li {
      color: black
    }
  }
}

.myClass2 {
  ul li {
    color: white
  }
}

我想使用[ngClass] 来动态更改这些CSS 类并具有不同的颜色。这个我试过了

[ngClass]="{'myClass': value==='option1', 'myClass2': value=== 'option2'}"

但它不起作用。

aside {
  background-color: white;
  min-height: 100%;
  padding-top: 10px;
  width: $aside-width;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.16);
  .sidebar-logo {
    margin-top: 20px;
    a {
      font-size: 35px;
      font-weight: bold;
      transition: 0.3s;
      opacity: 1;
      cursor: pointer;
      &:hover {
        opacity: 0.5;
      }
    }
  }
  .nav {
    width: 100%;
  }
  .links {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: $flags-height;
    ul li {
      a {
        color: $gray-dark;
        padding-left: $aside-primary-padding-horizontal;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        &:hover,
        &.active {
          background-color: $primary;
          color: white;
          i {
            margin-right: 20px;
            color: white;
          }
        }
        i {
          margin-right: 10px;
          font-size: x-large;
          color: $primary;
          padding-right: 10px;
          transition: 0.3s;
        }
      }
    }
  }
  .links2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: $flags-height;
    ul li {
      a {
        color: $gray-dark;
        padding-left: $aside-primary-padding-horizontal;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        &:hover,
        &.active {
          background-color: red;
          color: white;
          i {
            margin-right: 20px;
            color: white;
          }
        }
        i {
          margin-right: 10px;
          font-size: x-large;
          color: red;
          padding-right: 10px;
          transition: 0.3s;
        }
      }
    }
  }

<aside *ngIf="visible" [ngClass]="{'links aside': message === 'NORMAL', 'links2 aside' : message === 'LIGHT' }">

  <div class="links">
    <div class="sidebar-logo">
      <a (click)="goToHomePage()">
            CRM
          </a>
    </div>

    <hr class="horizontal-divider" />

    <ul class="nav side-menu">
      <ng-container *ngFor="let page of pages">
        <li *ngIf="page.visible">
          <a routerLink="{{page.URL}}" routerLinkActive="active">
            <i class="{{page.ICON_CLASS}}"></i>
            <span class="text">{{page.VALUE + '.SIDEBAR_TITLE' | translate}}</span>
          </a>
        </li>
      </ng-container>


    </ul>
  </div>

  <div class="footer">
    <div class="version">
      v. 0.2.0
    </div>
  </div>
</aside>

在我的示例中，我想使用类链接和链接2。

【问题讨论】：

请发布您的相关代码。
将您的 ngClass 更改为 [ngClass]="{'links ': message === 'NORMAL', 'links2 ' : message === 'LIGHT' }"

标签： html css angular ng-class

【解决方案1】：

试试这个，

[ngClass]="{'aside': true, 'links': message === 'NORMAL', 'links2' : message === 'LIGHT'}"

【讨论】：