Angular 6 NgClass change css class which is in the

问题:

I have a CSS file looking like this:

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

.myClass2 {
  ul li {
    color: white
  }
}

And I want to use [ngClass] to dynamically change these CSS classes and have different colors. I have tried this

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

But it's not working.

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>

In my example I want to use class links and links2.

回答1:

Try this,

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