typescript - Cum să setezi culoarea elementului activ în mat-nav-list în Angular 6

Sunt nou în Angular 6, aici am un mat-toolbar cu mat-sidenav. Totul funcționează bine, dar vreau să setez o culoare pentru elementul activ din meniul lateral.

În prezent, am un fundal NEGRU, vreau să setezi o culoare când selectez elementul din mat-nav-list și, de asemenea, am încercat să setez mat-divider între fiecare element, ceea ce, de asemenea, nu funcționează.

app.component.html

<mat-sidenav-container class="sidenav-container">

  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)" style="background:black"> //current background is black
    <mat-toolbar class="menuBar">Menus</mat-toolbar>
    <mat-nav-list>
      <a class="menuTextColor" mat-list-item href="#">Link 1</a> // want to change the color of the selected item.
      <a class="menuTextColor" mat-list-item href="#">Link 2</a> // want to set divider between each item
      <a class="menuTextColor" mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-toolbar class="toolbar">
      <button class="menuTextColor" type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span class="toolbarHeading">Demo App</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>

</mat-sidenav-container>

Poate cineva să mă ajute să rezolv asta.

Răspuns #1

Acest lucru poate fi realizat dacă folosești Angular Router cu atributul routerLinkActive.

Din documentația pentru directiva RouterLinkActive:

Îți permite să adaugi o clasă CSS unui element atunci când ruta linkului devine activă.

Descriere

Această directivă îți permite să adaugi o clasă CSS unui element atunci când ruta linkului devine activă.

Luați în considerare următorul exemplu:

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

Când URL-ul este fie /user, fie /user/bob, clasa active-link va fi adăugată la eticheta <a>. Dacă URL-ul se schimbă, clasa va fi eliminată.

Codul de mai jos prezintă un caz de utilizare tipic:

<mat-nav-list>
  <a mat-list-item routerLink="/home" routerLinkActive="active-list-item">Home</a>
  <a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">Settings</a>
  <a mat-list-item routerLink="/about" routerLinkActive="active-list-item">About</a>
</mat-nav-list>

.active-list-item {
  color: #3F51B5 !important; /* Note: You could also use a custom theme */
}

Câteva note:

• Poți schimba active-list-item cu orice nume de clasă dorești să fie aplicat.
• Declarația !important din al doilea fragment de cod este folosită deoarece stilurile elementelor de listă au prioritate față de stilurile tale personalizate.

Iată un Stackblitz.