Angular 6 NgClass 更改 css class 在标签中

Question

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

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

.myClass2 {
  ul li {
    color: white
  }
}

而且我想用[ngClass]来动态改变这些CSS class并且有不同的颜色。我试过这个

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

在我的示例中，我想使用 class 链接和 links2.

Answer 1

试试这个，

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

Angular 6 NgClass 更改 css class 在标签中

Angular 6 NgClass change css class which is in the tag

html

css

angular

ng-class