如何在 angular 6 中设置 mat-nav-list 中活动项的颜色

Question

我是 angular 6 的新手，这里我有一个带有 mat-sidenav 的 mat-toolbar。一切正常，但我想为侧边导航菜单中的活动项目设置颜色。

目前我有黑色背景我想在我 select mat-nav-list 中的项目时设置颜色并且我还尝试在每个项目之间设置 mat-divider 也不起作用。

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>

谁能帮我解决这个问题。

Answer 1

如果您使用具有 routerLinkActive 属性的 Angular 路由器，则可以这样做。

来自documentation for the RouterLinkActive directive：

Lets you add a CSS class to an element when the link's route becomes active.

Description

This directive lets you add a CSS class to an element when the link's route becomes active.

Consider the following example:
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
When the URL is either /user or /user/bob, the active-link class will be added to the <a> tag. If the URL changes, the class will be removed.

下面的代码展示了一个典型的用例：

<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 */
}

一些注意事项：

您可以将 active-list-item 更改为您想要应用的任何 class 名称。
第二个代码片段中的 !important 声明用作列表项样式优先于您的自定义样式。

这是一个Stackblitz。

Answer 2

希望我在这方面还不算太晚。我在 mat-nav-list 和 mat-menu 上遇到了同样的问题，所以用几行 css 我可以让它按照我想要的方式运行，试试看它是否符合你的需要，scss 下面：

[class^='mat-list-'] {
  &:hover:active {
    background: rgba(255, 255, 255, 0.04);
  }
  &:focus,
  .mat-list-text {
    background: none !important;
  }
}

[mat-menu-item].is-active,
[mat-list-item].is-active {
  background: hsla(0, 0%, 100%, 0.1) !important;
}

现在我有自定义深色主题，因此您可能想根据自己的选择设置颜色。只需添加 routerLinkActive="is-active" 就可以开始了。

/此致

Answer 3

在 Angular Materials 9.0 中，您必须更改以下颜色 class:

a.mat-list-item.active { color: #ccc; }

如何在 angular 6 中设置 mat-nav-list 中活动项的颜色

How to set color of active item in mat-nav-list in angular 6

typescript

angular-material

angular-material-6